javascript - 如何使用 fetch 对多部分表单数据进行 POST？

Question

我正在获取这样的 URL:

fetch(url, {
  mode: 'no-cors',
  method: method || null,
  headers: {
    'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
    'Content-Type': 'multipart/form-data'
  },
  body: JSON.stringify(data) || null,
}).then(function(response) {
  console.log(response.status)
  console.log("response");
  console.log(response)
})

我的 API 期望数据是 multipart/form-data 所以我正在使用这种类型的 content-type... 但它给了我一个响应状态码为 400。

我的代码有什么问题？

Answer 1

您将 Content-Type 设置为 multipart/form-data，但随后对正文数据使用 JSON.stringify ，返回 application/json。您的内容类型不匹配。

您需要将数据编码为 multipart/form-data 而不是 json。通常在上传文件时使用multipart/form-data，比application/x-www-form-urlencoded复杂一点(这是HTML表单的默认设置).

multipart/form-data 的规范可以在 RFC 1867 中找到.

有关如何通过 javascript 提交此类数据的指南，请参阅 here .

基本思路是使用 FormData对象(IE < 10 不支持):

async function sendData(url, data) {
  const formData  = new FormData();

  for(const name in data) {
    formData.append(name, data[name]);
  }

  const response = await fetch(url, {
    method: 'POST',
    body: formData
  });

  // ...
}

根据 this article确保不设置Content-Type header 。浏览器会为您设置它，包括 boundary 参数。