前端利用formData格式进行数据上传，前端formData 传值 和 json传值的区别？

前端利用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。