Question

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

CODE：

<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个键的空对象。我试图对数据进行字符串化，但我找不到正确的解决方案

Answer 1

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

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

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

1 个答案: