前端利用formData格式进行数据上传,前端formData 传值 和 json传值的区别?
contentType 常见的格式
- text/plain :纯文本格式
- application/json: JSON数据格式
- application/x-www-form-urlencoded
- 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=随机值 的形式。最终上传成功。
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。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析