前端利⽤formData格式进⾏数据上传，前端formData传值和json
传值的区别？
contentType 常见的格式
1. text/plain ：纯⽂本格式
2. application/json： JSON数据格式
3. application/x-www-form-urlencoded
中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
4. 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)进⾏转化
})
json值的类型有哪些
})
⼆. 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[]', iginFileObj);
});
} 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。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。