前端利用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)進行轉化
  })
})

二. 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。