fetch上传文件FormData失败原因

[版权声明] 本站内容采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆 (CC BY-NC-SA 3.0 CN) 进行许可。
部分内容和资源来自网络，纯学习研究使用。如有侵犯您的权益，请及时联系我，我将尽快处理。
如转载请注明来自： Broly的博客，本文链接： fetch上传文件FormData失败原因

用fetch通过post上传文件，发现服务器那边获取不到参数，代码如下：

const formData = new FormData();
formData.append('tid', id);
formData.append('file', file);

fetch(`${api}/lot`, {
	method: 'POST',
	headers: {
		'Content-type': 'multipart/form-data;'
	},
	body: formData
})
.then((response) => response.json())
.then((response) => {
	console.log(response)
});

const formData = new FormData();

formData.append('tid', id);

formData.append('file', file);

fetch(`${api}/lot`, {

method: 'POST',

headers: {

'Content-type': 'multipart/form-data;'

body: formData

})

.then((response) => response.json())

.then((response) => {

console.log(response)

});

然后测试发现，如果直接用HTML表单的方式是可以的。看了下浏览器的提交详情，对比发现我用fetch上传，header的Content-Type字段是这样的：

Content-Type: multipart/form-data;

1	Content-Type: multipart/form-data;

而用原生表单提交则是：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryoTb4kZI011bOGyNt

1	Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryoTb4kZI011bOGyNt

网上查了，fetch时把Content-Type留空即可，测试可行。

参考资料：《使用fetch上传文件失败的解决方案》

如果本文对您有所帮助，可以请作者喝杯咖啡，感谢支持^_^

支付宝支付

微信支付

学无止境 | 强者之心