上傳帶有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)它返回一個空的 object？ 相反，如果我 console.log(...bodyFormData) 它返回我上面設置的每個表單數據的 3 個單獨的 arrays。 我希望能夠在請求正文中將其作為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/

=> 在演示中，您可以看到開發工具 -> 網絡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);
});