如何使用提取对多部分表单数据进行 POST?

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

我的代码怎么了?

245141 次浏览

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 提交这类数据的指南,请参阅 给你

基本思想是使用 表格数据对象(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参数。

我最近在 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)
})