使用 formData 和 Axios 上传图像文件

Question

所以我想将图像上传到不接受 json 有效载荷的服务器，而是 formData。我正在做的是

var bodyFormData = new FormData();
bodyFormData.set("access_token", globalState.access_token);
bodyFormData.set("listing_id", 2);
bodyFormData.append("image", Cookies.get("listingCover"));

但在此之后如果我 console.log(bodyFormData) 它 returns 一个空对象？相反，如果我 console.log(...bodyFormData) 它 returns 我在上面设置的每个表单数据的 3 个独立数组。我希望能够在请求正文中将其作为 bodyFormData 发送，如下所示。我该怎么做？

 axios({
    method,
    url: url,
    data: bodyFormData,
    headers: { "Content-Type": "multipart/form-data" },
  })

Answer 1

使用 FormData.entries() 到 console.log 查看您的 formData

中存储的内容

你不能简单地 console.log(bodyFormData) 它不会 return 任何东西。

运行下面的片段。

var bodyFormData = new FormData();
bodyFormData.set("access_token", 'globalState.access_token');
bodyFormData.set("listing_id", 2);
bodyFormData.append("image", 'Cookies.get("listingCover")');

//Loop througt formData 
for (var data of bodyFormData.entries()) {
    console.log(data[0]+ ', ' + data[1]); 
}

你在做的时候没有任何方法axios你需要将你的方法设置为post如下所示发送你的bodyFormData

编辑： 工作演示：https://jsfiddle.net/mxkLejrf/

=> 在演示中你可以看到开发工具 -> 网络 bodyFormData 正在通过 POST

发送

axios({
    method: 'post',
    url: 'someEndPointUrl',
    data: bodyFormData,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  .then(function(response) {
    // success
    console.log(response);
  })
  .catch(function(response) {
    // error
    console.log(response);
});

使用 formData 和 Axios 上传图像文件

Uploading image file with formData and Axios

javascript

multipartform-data

form-data

axios