Vue.Js 不向后端发送文件

Question

我正在使用 vuejs 和 laravel 来尝试上传多个文件，但是在将文件数组从输入分配到 formData 之后，似乎什么也没发生。

HTML

<div id="app">
    <form id="upload-form" enctype="multipart/form-data" v-if="isInitial() || isSaving()">
        <div class="dropbox">
            <input type="file" multiple id="upload-input" @change="uploadFile($event)" :disabled="isSaving()">
            <p v-if="isInitial()">
                Drag your file(s) here to begin<br> or click to browse
            </p>
            <p v-if="isSaving()" v-cloak>
                Uploading (X amount of) files...
            </p>
            <p v-if="isSaved()" v-cloak>
                Image Saved!
            </p>
        </div>
    </form>
</div>

JAVASCRIPT

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            Status: {
                CurrentStatus: null,
                Initial: 0,
                Saving:  1,
                Success: 2,
                Saved:   3,
            }
        },
        mounted(){
            this.setInitial();
        },
        methods: {
            setInitial(){
                this.Status.CurrentStatus = this.Status.Initial;
            },
            uploadFile(event){
                let formData = new FormData;
                let length = event.target.files.count;
                let files = event.target.files;

                for(let x = 0; x < length; x++){
                    formData.append("files[]", files[x]);
                }

                console.log(formData);

                this.CurrentStatus = this.Status.Saving;

                axios.post('/upload/files', formData).then(x => {
                    console.log(x);
                });
            },
            isInitial(){
                return this.Status.CurrentStatus === this.Status.Initial;
            },
            isSaving(){
                return this.Status.CurrentStatus === this.Status.Saving;
            },
            isSuccess(){
                return this.Status.CurrentStatus === this.Status.Success;
            },
            isSaved(){
                return this.Status.CurrentStatus === this.Status.Saved;
            },
        }
    })
</script>

在我使用for循环设置formData之后的uploadFile方法中，我console.log它返回一个空的formData{}对象。但是当我 console.log files 变量时，它会返回我上传的所有图片的数组。

所以我认为错误在于我的 formdata 对象以及我是如何设置它的，但我不确定，我从来没有搞砸过 formdata，而且我对 JS 没有超级经验。

我的问题

为什么formdata对象没有设置数据。

Answer 1

试试

let length = event.target.files.length

而不是...

let length = event.target.files.count

Answer 2

我认为有几个问题。

let formData = new FormData;

应该是

let formData = new FormData();

你需要指定标题

axios.post('/upload/files', formData, {
    headers: {
        'content-type': 'multipart/form-data'
    }
}).then(x => {
    console.log(x);
});

Answer 3

你应该试试这个

让 formData = new FormData(event.target);

在函数中：

uploadFile(event){
   let formData = new FormData(event.target);
    console.log(formData);

  axios.post('/upload/files', formData).then(x => {
     console.log(x);
 });
}