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