Node.js中使用axios通过formData携带文件上传的问题排查

问题核心原因 #

Node.js 环境下 axios 不会自动处理 form-data 库生成的请求头，你当前的代码缺少两个关键配置：

1. 没有将 form-data 自动生成的带boundary的请求头合并到axios请求配置中
2. 没有配置axios的请求体长度限制，文件上传时容易触发大小拦截

具体修改步骤 #

1. 修改ApiBase类的axios实例配置和post方法 #

调整后的ApiBase代码如下：

import axios from 'axios'
import url from '../utils/constants.js'
// 引入FormData用于类型判断
import FormData from 'form-data'

class ApiBase {
  constructor(apiKey) {
    if (this.constructor === ApiBase) {
      throw new TypeError('Abstract class "ApiBase" cannot be instantiated directly');
    };

    let service = axios.create({
      headers: {
        'Authorization' : `Bearer ${apiKey}`
      },
      // 新增：解除文件上传的大小限制
      maxContentLength: Infinity,
      maxBodyLength: Infinity
    })
    
    this.service = service
  }

  post(payload, path) {
    const requestConfig = {
      method: 'POST',
      url: url + path,
      data: payload
    }
    // 新增：如果是FormData payload，自动合并带boundary的请求头
    if (payload instanceof FormData) {
      requestConfig.headers = {
        ...payload.getHeaders()
      }
    }
    return this.service.request(requestConfig)
  }
}
export default ApiBase

2. 调整formatData方法的文件append逻辑（可选，兼容对文件名有校验的服务端） #

部分服务端会校验上传文件的文件名参数，调整append逻辑补充文件名：

formatData (files, providers, language) {
  const user = new FormData();
  const key = [
    "files",
    "providers",
    "language",
  ];
  const value = [
    files,
    JSON.stringify(providers),
    language
  ];
  for (let i = 0; i < value.length; i++) {
    if (key[i] === 'files') {
      // 从文件流的path属性中提取文件名作为第三个参数
      const fileName = value[i].path?.split(/[\/\\]/).pop() || 'upload_file'
      user.append(key[i], value[i], fileName);
    } else {
      user.append(key[i], value[i]);
    }
  }
  return user  
}

验证方式 #

修改完成后运行测试代码，如果还是报错可以在post方法中打印requestConfig.headers，确认存在multipart/form-data类型的Content-Type头且带有boundary参数即可。

内容的提问来源于stack exchange，提问作者François Biscuit