为什么这段代码中的Axios在Vue中没有向后端发送任何数据？

问题描述

我正在尝试使用 Vue js 将图像上传到服务器，但听起来 Axios 没有向后端发送任何数据。后端是 ASP.netCore API。这很简单，我之前制作了这个表单，用于通过 fetch 将数据提交到服务器，并且效果很好！ 你看有什么不对吗？ 你可以在下面看到我的代码：

 <template>
    <h1>Uploading an Image!</h1>
    <p>This component demonstrates Uploading Image to server.</p>
    <div>
        <form>
            <input type="file" v-on:change="getFile($event)" />
            <button v-on:click="submitForm($event)">Upload</button>
        </form>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {

        name: "Upload1",data() {
            return {
                selectedFile: " ",uploadResult: " "
            }
        },methods: {

            getFile(event) {
                this.selectedFile = event.target.files[0];
                console.log(this.file);
            },submitForm(event) {
                event.preventDefault();
                let formData = new FormData();
                formData.append("ImageData.File",this.selectedFile);

                let config = {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                };
                axios.post('/api/Image',{

                    formData,config

                }).then(resposne => resposne.json())
                    .then(data => {
                        console.log(data);
                        
                        this.uploadResult = "File " + data.fileName + " successfully uploaded."
                    });
            }
        }

    };

</script>

解决方法

尝试像这样重构请求：

            event.preventDefault();
            let formData = new FormData();
            formData.append("ImageData.File",this.selectedFile);

            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            };
            axios({
                baseURL: 'https://some-domain.com/api/',// your backend base url
                method: 'post',url:'/api/Image',data:formData,...config

            }).then(resposne => resposne.json())

,

我将 formData 和 config 包装在一个对象中。它们应该是传递给 post 的第二个和第三个参数，如下所示：

axios.post('/api/Image',formData,config)

问题解决了！