Question

我正在获取这样的网址：

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＆lt; 10不支持）：

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

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

  fetch(url, {
    method: 'POST',
    body: formData
  }).then(function (response) {
     ...
  });
}

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在第二部分。）{{3对象为您管理所有这些，因此这是实现目标的更好方法。

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

使用多部分表单数据

2 个答案: