React中使用axios上传文件时Node.js的formData.getHeaders()对应方案是什么

问题1：React（浏览器）环境下FormData没有getHeaders()的对应实现 #

getHeaders()是Node.js端第三方form-data库提供的专属API，浏览器原生FormData实例没有该方法，也不需要手动调用实现同等效果：
浏览器环境下使用axios提交FormData时，只要直接将FormData实例作为请求体参数传递，axios会自动识别请求体类型，自动生成并带上正确的multipart/form-data相关请求头，无需手动配置。

问题2：getHeaders()提取的头信息 #

当FormData仅包含上传文件时，该方法返回的头信息核心只有1项：

'Content-Type': 'multipart/form-data; boundary=----随机生成的分隔字符串'

其中boundary是用来分隔FormData内不同字段的随机标识，必须和请求体内部的分隔符完全一致，因此不能手动硬编码指定。

代码错误修复 #

你上传失败的核心原因有两个：

1. 封装的patch方法中错误展开了FormData：{ ...data }会直接丢失所有FormData内容，相当于提交了空对象
2. 原有配置里的Content-Type: application/json和文件上传需要的multipart/form-data类型冲突，需要删除该硬编码配置

修正后的patch方法代码 #

export async function patch(url, data, config = {}) {
    console.log('url = ', url);
    console.log('data = ', data);
    console.log('config = ', config);
    var headers = {};
    if (data instanceof FormData) {
        // 提交FormData时不要手动设Content-Type，交给axios自动处理
        for (var pair of data.entries()) {
            console.log(pair[0]+ ', ' + pair[1]);
        }
    }
    if ('headers' in config && config.headers ) {
      headers = config.headers
      delete config.headers;
    }
    // 直接传data本身，不要展开；移除错误的Content-Type硬编码即可
    return axiosApi
      .patch(url, data, { params: { ...config }, headers: headers })
      .then( response => response.data)
}

另外你在axios实例创建时也不需要硬加'Authorization': 'Bearer '配置，拦截器已经处理了鉴权头，可直接删除该行冗余配置。

内容的提问来源于stack exchange，提问作者Professor Chaos