使用 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) 它返回一个空对象？相反，如果我 console.log(...bodyFormData) 它返回我在上面设置的每个表单数据的 3 个独立数组。我希望能够在请求正文中将其作为bodyFormData 发送，如下所示。我该怎么做？

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

Answer 1

使用FormData.entries() 到console.log 以查看您的formData 中存储的内容

你不能简单的 console.log(bodyFormData) 它不会返回任何东西。

在下面运行sn-p。

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);
});