Vue Axios 表单发送空数据而不是图像答案

【问题标题】：Vue Axios form sending empty data instead of imageVue Axios 表单发送空数据而不是图像
【发布时间】：2018-07-19 03:36:42
【问题描述】：

好吧，所以我尝试使用 JSON 发送图像数据，但无论我做什么，我总是最终发送一个空对象...我尝试控制台日志结果，但不管它只是发送什么空对象

代码：

<body>
    <div id="app">
        <div v-if="!image">
            <h2>Select an image</h2>
            <input type="file" @change="onFileChange" multiple>
        </div>
        <div v-else>
            <div v-for="img in image" class="img_overlay">
                <img :src="img" class="img_set"/><br/>
                <button @click="removeImage(img)">Remove image</button>
            </div>
        </div>
    </div>

    <style>
        .img_overlay {
            width: 25%;
            height: 250px;
            float: left;
            text-align: center;
        }
        img {
            width: 250px;
            height: 200px;
        }
    </style>

    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                image: "",
                file_data: []
            },
            methods: {
                onFileChange(e) {
                    var files = e.target.files || e.dataTransfer.files;

                    if (!files.length)
                        return;
                    else if(files.length == 1) 
                        this.createImage(files)    
                    else if(files.length >= 2)                        
                        this.createImage(files)

                    this.file_data = e.target.files;
                    this.uploadImage(e.target.files);
                },
                createImage(file) {        

                    var tmp = []; 


                    for(let i = 0; i < file.length; i++) {
                        var image = new Image();
                        var reader = new FileReader();
                        var vm = this;


                        reader.onload = (e) => {
                            tmp.push(e.target.result);
                        };
                        reader.readAsDataURL(file[i]);
                    }
                    vm.image = tmp;

                },
                removeImage: function (img) {

                    for(let i = 0; i < this.image.length; i++) {
                        if(this.image[i] == img) {
                            this.image.splice(i, 1);
                        }
                    }
                },
                uploadImage: function(x_file) {
                    const config = {
                        headers: { 'content-type': 'multipart/form-data' }
                    }
                    axios.post('/theme/post_new_image', x_file, config).then(function (response) {
                        console.log(response);
                    }).catch(e => { console.log(e); });

                }
            }
        });
    </script>
</body>

我通常得到的结果是带有 5 个键的空对象。我试图对数据等进行字符串化，但我找不到正确的解决方案

【问题讨论】：

你为什么两次调用uploadImage，为什么第二次没有传递任何参数？
@sklingler93 哎呀，我没有注意到，这是偶然的，我只是稍微整理一下代码，更改了一些东西，我会删除那部分，这是偶然的，但仍然即使没有它，我也会得到完全相同的结果

标签： vue.js axios

【解决方案1】：

您正在将一组文件传递给您的uploadImage 函数。尝试遍历数组以上传每个文件：

for (var i = 0, f; f = e.target.files[i]; i++) {
  uploadImage(f);
}

【讨论】：

但我必须通过所有图像，它的多上传。如果我一个接一个地传递它，那么我的后端会很混乱:(有没有办法让它们一次发送？
是的，您可以将图像附加到数据对象，如下所述：github.com/axios/axios/issues/710