前端利用formData格式進行資料上傳,前端formData 傳值 和 json傳值的區別?
阿新 • • 發佈:2020-12-18
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。