文章目录

目标问题问题描述原因分析解决方案

目标

使用Vue框架和axios上传文件

---

问题

1、axios上传文件，服务端接收数据为空 2、客户端报错： Error: Request failed with status code 400

问题描述

上传文件时发现上传至服务端数据为空 doUpload(file) { if (file) { let fd = new FormData(); fd.append("file", file); axios({ method: "post", url: "http://127.0.0.1:8888/api/UploadFile", headers: { "content-type": "multipart/form-data", }, data: { fd, }, }).then((response) => { console.log(response.data); });

---

原因分析

最初是因为请求头文本类型没有设置，上传表单数据时，是需要设置文本类型为 multipart/form-data ,一开始使用axios的写法是axios(config)这种写法，在config配置了请求头content-type。

然而在设置请求头content-type后，请求失败状态码为400 经过分析，实际上的请求头的content-type确实是变成了multipart/form-data类型，但是却不是有效的 错误图片： 正确图片： 原因就是发送的数格式问题 原因就是发送的数格式问题 原因就是发送的数格式问题

axios({ method: "post", url: "http://127.0.0.1:8888/api/UploadFile", headers: { "content-type": "multipart/form-data", }, //这里的问题 data: {from,}, onUploadProgress: (progressEvent) => { this.progress = (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%"; if (this.progress === "100%") { this.isLoading = false; } }, })

---

解决方案

方法一： 发送的数格式改成

axios({ method: "post", url: "http://127.0.0.1:8888/api/UploadFile", headers: { "content-type": "multipart/form-data", }, //这里改成这样 data: form, onUploadProgress: (progressEvent) => { this.progress = (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%"; if (this.progress === "100%") { this.isLoading = false; } }, })

换种axios请求的写法：

const form = new FormData(), loadBar = this.$refs.loadingBar; form.append("file", file); //form的位置就是数据，相当于上面的data：form axios.post("http://127.0.0.1:8888/api/UploadFile", form, { headers: { "content-type": "multipart/form-data" }, //这个是监听文件传输 onUploadProgress: (progressEvent) => { this.progress = (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%"; if (this.progress === "100%") { this.isLoading = false; } }, }) .then((response) => { console.log(response.data); }); }