ajax传formdata类型的数据_前端利用formData格式进行数据上传，前端formData 传值 和 json传值的区别？

ajax传formdata类型的数据_前端利用formData格式进行数据上传，前端formData 传值 和 json传值的区别？...

文章标签： ajax传formdata类型的数据
版权

一站式学习AI基础知识+核心技术+实操教程+免费工具集
9大课程，边学习边实操，带你通关计算机视觉应用，还有免费工具集和开放平台供所有开发者使用！
contentType 常见的格式

text/plain ：纯文本格式

application/json： JSON数据格式

application/x-www-form-urlencoded

中默认的encType，form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)

multipart/form-data ： 须要在表单中进行文件上传时，就须要使用该格

一. json格式传递

fetch(url, {
method: 'POST', // or 'PUT'

body: JSON.stringify(data), // data can be `string` or {object}!

headers: new Headers({
'Content-Type': 'application/json' // 须要主动设置，而且将object 用JSON.stringify(data)进行转化

})

})

二. From URL Encoded - url 编码格式 (qs.stringify 格式)

fetch(url, {
method: 'POST', // or 'PUT'

body: qs.stringify(data), // 或者将data转换为formData格式

headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded' // 不进行header设置的默认格式

})

})

三 from 非编码格式 - Multipart From (文件流的格式)

因为 涉及文件上传，表单的 提交必须采起非编码格式 即，'content-type'：multipart/form-data;boundary=${boundary}；

${boundary} 为一分割字符串。可是，重点来了，无论事fetch，仍是rxjs的 ajax 只要主动设置 content-type为multipart/form-data，不加后面的boundary，会自动加到传输的格式中，致使后端取不到值。若是加了boundary，又致使直接formData都取不到值。

最终解决方案就是，content-type不进行设置，只将data改成 formData格式。浏览器会自动识别，自动设置为content-type：multipart/form-data;boundary=随机值 的形式。最终上传成功。ios

export const toFormData = (data: Data) => {
if (data === null) return null;

return Object.keys(data).reduce((formData, item) => {
if (item === 'files') { //特殊判断若是内容为files数组，就让里面值不用走JSON.stringify

data[item] &&

data[item].forEach((curr) => {
formData.append('upload_file[]', curr.originFileObj);

});

} else {
formData.append(item, JSON.stringify(data[item]));

}

return formData;

}, new FormData());

};

总结：

遇到要传JSON值，须要手动设置content-type ：application/json；

遇到须要传递From URL Encoded 格式 formData， 须要 手动设置 content-type：application/x-www-form-urlencoded ，而且使用 qs.stringify (data) 将data转换为url格式，才能正常使用

遇到须要文件流 (Multipart From)格式的formData，须要 手动构建formData 数据 ，(new formData，.append('a',1),...), 而后去掉全部的 content-type设置。也就是 不对content-type进行设置。利用formData直接做为 post接口的body值，这样就能正确转化为 'content-type'：multipart/form-data;boundary=${boundary} 格式。反正在这种状况下，我实践只能是什么都不传成功了，其余状况都失败了。使用了fetch和 rxjs的ajax，没有使用axios。ajax
————————————————
版权声明：本文为CSDN博主「weixin_39990410」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39990410/article/details/114485157