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

IT技术 javascript fetch fetch-api
2021-01-29 04:58:30

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

我的代码有什么问题?

2个回答

您将 设置Content-Typemultipart/form-data,但随后JSON.stringify在正文数据上使用,返回application/json. 您的内容类型不匹配。

您需要将数据编码multipart/form-datajson. 通常multipart/form-data在上传文件时使用,并且比application/x-www-form-urlencoded(这是 HTML 表单的默认设置)要复杂一些

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

有关如何通过 javascript 提交此类数据的指南,请参见此处

基本思想是使用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
  });

  // ...
}

根据本文确保不要设置Content-Type标题。浏览器会为你设置,包括boundary参数。

const fd = new FormData(); // 要上传的文件。fd.append('file', fileToUpload); fd.append('jsondatakey', 'jsondatavalue'); 有了这个,您将能够将文件与正文中的一些 json 数据一起发送。
2021-03-29 04:58:30
如果我需要授权怎么办?
2021-04-06 04:58:30

我最近在使用 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对象管理这一切给你,所以这是一个更好的方式来实现我们的目标。

这转化为这样的获取 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)
})
@DragosStrugar 您仍然可以设置标题(包括授权),如果您使用的是 FormData,请不要手动设置 Content-Type 标题。
2021-03-16 04:58:30
请注意上述方法,如果您使用 FormData 执行此操作,请不要提供标题,因为它会覆盖自动设置的边界。
2021-03-28 04:58:30
在 curl 示例中,您需要它。FormData示例中,您不需要它,因为浏览器会为您发送该标头并管理所有 mime-boundries,这是该解决方案的重点。
2021-03-29 04:58:30
谢谢@MattPengelly!那么如何设置像 Authorization 这样的自定义标头呢?
2021-03-31 04:58:30
如果使用 FormData,请勿提供带有“Content-Type”的标头。
2021-04-04 04:58:30