Browserify版Node.js form-data追加Buffer和Stream时报错

问题背景 #

在Node.js环境中可正常运行的FormData构建代码，经Browserify打包后在浏览器中报错：

"Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'."

原代码依赖Node.js的form-data库，使用Buffer和ReadableStream追加数据，但浏览器环境下无论是用该库还是原生FormData都触发类型错误，且业务要求不能将数据转为Blob。

解决方案 #

1. 强制使用form-data的完整Node实现 #

修改项目package.json，配置Browserify不替换form-data为浏览器原生API：

{
  "browser": {
    "form-data": "./node_modules/form-data/lib/form_data.js"
  }
}

此配置让Browserify打包form-data的纯JS实现，它会自行处理Buffer和Stream的multipart编码，完全不依赖浏览器原生FormData，规避类型限制。

2. 适配浏览器环境的数据流处理 #

若无法修改Browserify配置，可将Node风格的Buffer和Stream转换为浏览器兼容的格式（不转Blob）：

let body = {
  type: "Introductory",
  answeringRule: { id: "36" },
};

const NodeFormData = require("form-data");
const formData = new NodeFormData();

// 处理Buffer：转为ArrayBuffer传入
const jsonBuffer = Buffer.from(JSON.stringify(body));
formData.append("json", jsonBuffer.buffer, {
  filename: "request.json",
  contentType: "application/json",
  knownLength: jsonBuffer.length
});

// 处理Node ReadableStream：转为浏览器ReadableStream
const browserStream = new ReadableStream({
  async pull(controller) {
    const chunk = await new Promise((resolve, reject) => {
      audioStream.once('data', resolve);
      audioStream.once('error', reject);
      audioStream.once('end', () => resolve(null));
    });
    if (chunk === null) {
      controller.close();
    } else {
      controller.enqueue(chunk.buffer);
    }
  }
});

formData.append("binary", browserStream, {
  filename: "audioStream.mp3",
  contentType: "audio/mpeg"
});

利用form-data对ArrayBuffer和浏览器ReadableStream的支持，绕过Blob类型限制。

差异原因 #

• Node.js环境：form-data库是独立实现的multipart编码逻辑，原生支持Node的Buffer和ReadableStream，无需依赖浏览器API。
• Browserify打包后：form-data默认启用浏览器适配模式，内部调用原生FormData API。而浏览器原生FormData的append仅接受Blob、File或字符串，不支持Node风格的Buffer和Stream，因此触发类型错误。

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