Axios上传Buffer至外部服务器遇数据转换格式错误求助

错误信息 #

Data after transformation must be a string, an ArrayBuffer, a Buffer, or a Stream

问题代码 #

const formData = new FormData();
formData.append('file', new Blob([file]), '...');

const config = this.getConfig();
try {
  const res = await axios.post(
    `...`,
    formData,
    {
      headers: {
        ...
        'Content-Type': 'multipart/form-data',
        'Content-Length': file.byteLength,
        ...
      },
    },
  );
  if (!res) return;
} catch (e) {
  if (e instanceof AxiosError) {
    console.error(e.message);
  }
}

问题分析 #

1. Node.js环境下禁止使用Blob：Blob是浏览器专属API，Node.js中直接用原始Buffer即可，包装成Blob会导致Axios无法正确识别数据类型。
2. 手动设置Content-Type会破坏FormData的边界符：multipart/form-data请求需要带自动生成的边界符（如boundary=----WebKitFormBoundaryxxx），手动设置头会覆盖这个关键信息，引发请求体转换失败。
3. 手动指定Content-Length易出错：文件实际传输长度会因FormData包装而变化，手动设置的file.byteLength并不准确，会触发数据校验问题。

修正代码 #

const formData = new FormData();
// 直接传入原始Buffer，无需Blob包装
formData.append('file', file, '你的文件名');

const config = this.getConfig();
try {
  const res = await axios.post(
    '目标接口地址',
    formData,
    {
      headers: {
        // 保留其他业务所需头，移除Content-Type和Content-Length
        ...config.headers,
      },
    },
  );
  if (!res) return;
} catch (e) {
  if (e instanceof AxiosError) {
    console.error(e.message);
  }
}

补充说明 #

Axios 0.27.2版本存在该共性问题：当手动设置multipart/form-data头但未包含正确边界符时，会触发请求体转换失败错误。让Axios从FormData自动读取带边界符的Content-Type，即可解决问题。

内容的提问来源于stack exchange，提问作者Mohamed Said