vue上传图片接口file传值为空怎么回事？

Question

使用file参数请求接口时如何让参数不为空？应该怎么像postman中那样传参？
postman中可以直接使用file上传

接口：

API.goods.fileupload({'file':this.fileinfo[0].file}).then((resp) => {

})

Network中可以看到参数为空：

this.fileinfo[0]值为：

---

接口地址：

fileupload(data, token) {
    if (localStorage.getItem('login')) {
        var token = localStorage.getItem("access_token")
    }
    return axios.post(API_ROOT + '/v1/feedback/feedback/fileupload-frq?access-token=' + token, qs.stringify(data))
}

请求接口：

let formData = new FormData();
formData.append("file", this.fileinfo[0].file);
API.goods.fileupload(formData).then((resp) => {})

Answer 1

获取到file的dom对象
然后使用FormData构建

Answer 2

  formData.append("file", file);
  // 错误的示范，千万不要将formData包一层花括号，这会导致上传的值为{file: {}}，也就是空值，这是一个陷阱，我想很多人应该遇到过
  axios.post("/upload", { file: formData });
  // 要这样，直接上传formData
  axios.post("/upload", formData);

并且不需要设置Content-Type

Answer 3

传文件使用FormData对象
FormData 对象的使用