react form表单附带文件 formdata上传的一些问题

1.上传带文件的表单,form表单应该设置encType="multipart/form-data",但是设置之后但控制台中请求头header的Content-Type仍然为application/json
用fetch请求:

export async function formDataFetch(params: FormData) {
  const response = await fetch('#', {
    method: 'POST',
    headers: {
      "Content-Type": "multipart/form-data", 
    },
    body: params,
  });
  return await response.json();
}

此时设置的请求头有效,但获得的数据大概如下格式:

xxxx
Content-Disposition: form-data; name=“foo”

bar xxxx Content-Disposition: form-data; name=“baz”

The first line. The second line.

xxxx

multipart/form-data 类型HTTP请求详解 - 知乎
由此可知最好不要手动设置ContentType为multipart/form-data,因为无法获取boundary,数据无法分割
注释掉"Content-Type": "multipart/form-data", 之后又出现新的问题

react 使用antd的upload组件通过fromdata上传文件

export async function createData(params: any) {
  const formData = jsToFormData(params);
  const response = await fetch(`/api/add`, {
    method: 'POST',
    body: formData,
  });
  return await response.json();
}

//对象转formdata格式
export const jsToFormData = (params: any) => {
  const formData = new FormData();
  // console.log('params');
  // console.log(params);
  //循环传入的值转换formData
  Object.keys(params).forEach((key) => {
    // console.log('key:' + key);

    // fileList转储formdata
    if (Array.isArray(params[key])) {
      console.log('Array.isArray( ' + key + ') ');
      console.log(params[key]);
      for (let i = 0; i < params[key].length; i++) {
        // console.log('params[key][i].originFileOb');
        // console.log(params[key][i].originFileOb);
        //upload组件的file 需要获取原File对象再上传
        if (params[key][i].originFileObj != undefined) {
          formData.append(key, params[key][i].originFileObj);
        } else {
          formData.append(key, params[key][i]);
        }
      }
    } else if (typeof params[key] == 'object') {
    //通过json格式提交数据
      formData.append(key, JSON.stringify(params[key]));
    } else if (params[key] != undefined) {
      formData.append(key, params[key]);
    }
  });
  return formData;
};

参考:

react使用antd的上传组件实现文件表单一起提交_wangshuai33的博客-CSDN博客