Javascript 使用多部分表单数据获取帖子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35192841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fetch post with multipart form data
提问by aryan
I am fetching a URL like this:
我正在获取这样的 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)
})
My API expects the data to be of multipart/form-dataso I am using content-typeof this type... But it is giving me a response with status code 400.
我的API预计的数据是multipart/form-data，所以我使用content-type这种类型的...但它给我的状态代码：400的响应。
What's wrong with my code?
我的代码有什么问题？
回答by rossipedia
You're setting the Content-Typeto be multipart/form-data, but then using JSON.stringifyon the body data, which returns application/json. You have a content type mismatch.
您将 设置Content-Type为multipart/form-data，但随后JSON.stringify在正文数据上使用，返回application/json. 您的内容类型不匹配。
You will need to encode your data as multipart/form-datainstead of json. Usually multipart/form-datais used when uploading files, and is a bit more complicated than application/x-www-form-urlencoded(which is the default for HTML forms).
您需要将数据编码multipart/form-data为json. 通常multipart/form-data在上传文件时使用，并且比application/x-www-form-urlencoded（这是 HTML 表单的默认设置）要复杂一些。
The specification for multipart/form-datacan be found in RFC 1867.
的规范multipart/form-data可以在RFC 1867 中找到。
For a guide on how to submit that kind of data via javascript, see here.
有关如何通过 javascript 提交此类数据的指南，请参见此处。
The basic idea is to use the FormDataobject (not supported in IE < 10):
基本思想是使用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
});
// ...
}
Per this articlemake sure notto set the Content-Typeheader. The browser will set it for you, including the boundaryparameter.
根据本文确保不要设置Content-Type标题。浏览器会为你设置，包括boundary参数。
回答by konsumer
I was recently working with IPFS and worked this out. A curl example for IPFS to upload a file looks like this:
我最近在使用 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"
The basic idea is that each part (split by string in boundarywith --) has it's own headers (Content-Typein the second part, for example.) The FormDataobject manages all this for you, so it's a better way to accomplish our goals.
其基本思路是，每个部分（由字符串分割在boundary用--），有它自己的头（Content-Type在第二部分，例如）的FormData对象管理这一切给你，所以这是一个更好的方式来实现我们的目标。
This translates to fetch API like this:
这转化为这样的获取 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)
})
