contentType 常見(jiàn)的格式

text/plain ：純文本格式

application/json： JSON數(shù)據(jù)格式

application/x-www-form-urlencoded 中默認(rèn)的encType，form表單數(shù)據(jù)被編碼為key/value格式發(fā)送到服務(wù)器(表單默認(rèn)的提交數(shù)據(jù)的格式)

multipart/form-data ： 需要在表單中進(jìn)行文件上傳時(shí)，就需要使用該格

一. json格式傳遞

fetch(url, {

method: 'POST', // or 'PUT'

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

headers: new Headers({

'Content-Type': 'application/json' // 需要主動(dòng)設(shè)置，并且將object 用JSON.stringify(data)進(jìn)行轉(zhuǎn)化

})

})

二. From URL Encoded - url 編碼格式 (qs.stringify 格式)

fetch(url, {

method: 'POST', // or 'PUT'

body: qs.stringify(data), // 或者將data轉(zhuǎn)換為formData格式

headers: new Headers({

'Content-Type': 'application/x-www-form-urlencoded' // 不進(jìn)行header設(shè)置的默認(rèn)格式

})

})

三 from 非編碼格式 - Multipart From (文件流的格式)

由于 涉及文件上傳，表單的 提交必須采取非編碼格式 即，'content-type'：multipart/form-data;boundary=${boundary}；

${boundary} 為一分割字符串。但是，重點(diǎn)來(lái)了，不管事fetch，還是rxjs的 ajax 只要主動(dòng)設(shè)置 content-type為multipart/form-data，不加后面的boundary，會(huì)自動(dòng)加到傳輸?shù)母袷街?#xff0c;導(dǎo)致后端取不到值。如果加了boundary，又導(dǎo)致直接formData都取不到值。

最終解決方案就是，content-type不進(jìn)行設(shè)置，只將data改為 formData格式。瀏覽器會(huì)自動(dòng)識(shí)別，自動(dòng)設(shè)置為content-type：multipart/form-data;boundary=隨機(jī)值 的形式。最終上傳成功。

export const toFormData = (data: Data) => {

if (data === null) return null;

return Object.keys(data).reduce((formData, item) => {

if (item === 'files') { //特殊判斷如果內(nèi)容為files數(shù)組，就讓里面值不用走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());

};

總結(jié)：

遇到要傳JSON值，需要手動(dòng)設(shè)置content-type ：application/json；

遇到需要傳遞From URL Encoded 格式 formData， 需要 手動(dòng)設(shè)置 content-type：application/x-www-form-urlencoded ，并且使用 qs.stringify (data) 將data轉(zhuǎn)換為url格式，才能正常使用

遇到需要文件流 (Multipart From)格式的formData，需要 手動(dòng)構(gòu)建formData 數(shù)據(jù) ，(new formData，.append('a',1),...), 然后去掉所有的 content-type設(shè)置。也就是 不對(duì)content-type進(jìn)行設(shè)置。利用formData直接作為 post接口的body值，這樣就能正確轉(zhuǎn)化為 'content-type'：multipart/form-data;boundary=${boundary} 格式。反正在這種情況下，我實(shí)踐只能是什么都不傳成功了，其他情況都失敗了。使用了fetch和 rxjs的ajax，沒(méi)有使用axios。

總結(jié)

以上是生活随笔為你收集整理的HTML地址栏传数据和json区别,前端利用formData格式进行数据上传，前端formData 传值 和 json传值的区别？...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。