使用多部分表单数据获取帖子

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提交此类数据的指南,请参阅此处.

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

  // ...
}

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

这转换为获取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)
})