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），它将返回我在上面设置的每个formdata的3个saperate数组。我希望能够在请求的正文中以bodyFormData的形式发送它，如下所示。我该怎么办？

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

Answer 1

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

您不能只是console.log（bodyFormData）它不会返回任何内容。

运行下面的代码段。

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/

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

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上传图像文件

1 个答案: