如何使用 fetch 发布多部分表单数据？

Posted 2023-02-27

【中文标题】如何使用 fetch 发布多部分表单数据？

【英文标题】：How do I POST with multipart form data using fetch?

【发布时间】：2016-05-13 13:58:17

【问题描述】：

我正在获取这样的 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 的响应。

我的代码有什么问题？

【参考方案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

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 标头。浏览器会为你设置好，包括boundary参数。

【讨论】：

const fd = new FormData(); // 要上传的文件。 fd.append('file', fileToUpload); fd.append('jsondatakey', 'jsondatavalue');有了这个，您将能够发送文件以及正文中的一些 json 数据。

如果我需要授权怎么办？

【参考方案2】：

我最近在使用 IPFS 并解决了这个问题。 IPFS 上传文件的 curl 示例如下所示：

curl -i -H "Content-Type: multipart/form-data; boundary=CUSTOM" -d $'--CUSTOM\r\nContent-Type: multipart/octet-stream\r\nContent-Disposition: file; filename="test"\r\n\r\nHello World!\n--CUSTOM--' "http://localhost:5001/api/v0/add"

基本思想是每个部分（在boundary 和-- 中按字符串拆分）都有自己的标题（例如，第二部分中的Content-Type。）FormData 对象为您管理所有这些，所以这是实现我们目标的更好方法。

这转换为这样的 fetch API：

const formData = new FormData()
formData.append('blob', new Blob(['Hello World!\n']), 'test')

fetch('http://localhost:5001/api/v0/add', 
  method: 'POST',
  body: formData
)
.then(r => r.json())
.then(data => 
  console.log(data)
)

【讨论】：

请注意上述方法，如果您使用 FormData 执行此操作，请不要提供标题，因为它会覆盖自动设置的边界。

谢谢@MattPengelly！那么如何设置像 Authorization 这样的自定义标头呢？

@DragosStrugar 您仍然可以设置标题（包括授权），如果您使用 FormData，请不要手动设置 Content-Type 标题。

如果使用 FormData，请勿提供带有“Content-Type”的标题。

在 curl 示例中，您需要它。在 FormData 示例中，您不需要它，因为浏览器会为您发送该标头并管理所有 mime-boundries，这是此解决方案的重点。