How can I pass input file with vue.js 2?

2019-09-20 07:22发布

问题:

My vue component like this :

<template>
    <div class="modal" tabindex="-1" role="dialog">
        ...
            <div class="form-group">
                <label for="change-image">Change image</label>
                <input type="file" name="replace" v-on:change="changeImage">
            </div>
            <div class="form-group">
                <label for="alt-image">Alt attr</label>
                <input type="text" class="form-control" v-model="altImage">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" v-model="mainCover"> Set Cover
                </label>
            </div>
            <button type="button" class="btn btn-success" @click="editImageProduct">
                Edit
            </button>
        ...
    </div>
</template>
<script>
    export default{
        ...
        data() { return {altImage: '', mainCover: '', imageChanged: '', image: ''}},
        methods: {
            editImageProduct(event) {
                const payload = {alt_image: this.altImage, main_cover: this.mainCover, image_changed: this.imageChanged}
                this.$store.dispatch('editImageProduct', payload)
            },
            changeImage(e) {
                var files = e.target.files || e.dataTransfer.files
                if (!files.length)
                    return;
                this.createImage(files[0])
                this.imageChanged = files[0]
            },
            createImage(file) {
                var image = new Image()
                var reader = new FileReader()
                var vm = this
                reader.onload = (e) => {
                    vm.image = e.target.result
                };
                reader.readAsDataURL(file)
            },
        } 
    }
</script>

I want to send the parameters to controller. It will go through modules, api, routes and controller

On the controller, I do like this :

public function editImage(Request $request)
{
    dd($request->all());
}

When executed, the result like this :

array:5 [

"alt_image" => "test alt"

"main_cover" => true

"image_changed" => []

]

The param image_changed is empty

Whereas on the component, I do console.log, it display the result

When I do console.log(files[0]), the result like this :

How can I solve this problem?