Node.js+FormData从Buffer上传图片至Cloudflare报错求助

问题根源分析 #

你遇到的三个错误本质都是Node.js环境下FormData处理Buffer/文件流的适配问题：

1. Request body length does not match content-length header：手动调用form.getLengthSync()计算的长度，和fetch实际编码multipart表单后的长度不一致，导致Cloudflare校验失败。
2. Bad request: incomplete multipart stream：未指定文件的正确类型/后缀，Cloudflare无法正确解析multipart表单结构；或是FormData的header处理有误。
3. source.on is not a function：Node.js早期版本的Blob实现与浏览器不兼容，转Blob后FormData无法识别为可流处理的数据源。

解决方案 #

根据你使用的Node.js版本，选择对应的修复方案：

方案1：Node.js v18+（原生fetch支持）

原生fetch会自动处理FormData的header和content-length，无需手动干预，只需确保文件类型正确：

const cloudflare_url = `https://api.cloudflare.com/client/v4/accounts/${process.env.CLOUDFLARE_ACCNT_ID}/images/v1`;
const roundedCorners = Buffer.from('<svg><rect x="0" y="0" width="200" height="200" rx="50" ry="50"/></svg>');

// 使用Node.js原生FormData
const form = new FormData();
// 明确指定文件名（带后缀）和内容类型，帮助Cloudflare识别文件
form.append("file", roundedCorners, {
  filename: "corners.svg",
  contentType: "image/svg+xml"
});

const response = await fetch(cloudflare_url, {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.CLOUDFLARE_API_KEY}`
    // 无需手动添加form.getHeaders()或content-length，原生fetch自动处理
  },
  body: form,
});

const result = await response.json();
console.log(result);
if (result.success) console.log(`File transferred successfully!`);
else console.log(`Failed to transfer file:`, result.errors);

方案2：Node.js <v18（需依赖第三方库）

旧版本Node.js没有原生FormData/fetch支持，需使用form-data和node-fetch包：

1. 先安装依赖：

npm install form-data node-fetch

2. 修正代码：

const fetch = require('node-fetch');
const FormData = require('form-data');

const cloudflare_url = `https://api.cloudflare.com/client/v4/accounts/${process.env.CLOUDFLARE_ACCNT_ID}/images/v1`;
const roundedCorners = Buffer.from('<svg><rect x="0" y="0" width="200" height="200" rx="50" ry="50"/></svg>');

const form = new FormData();
form.append("file", roundedCorners, {
  filename: "corners.svg",
  contentType: "image/svg+xml"
});

const response = await fetch(cloudflare_url, {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.CLOUDFLARE_API_KEY}`,
    ...form.getHeaders() // 必须使用form-data库的getHeaders()方法
  },
  body: form,
});

const result = await response.json();
console.log(result);
if (result.success) console.log(`File transferred successfully!`);
else console.log(`Failed to transfer file:`, result.errors);

关键注意事项 #

• 文件类型必须明确：Cloudflare Images需要识别文件格式，要么给文件名加正确后缀（如.svg），要么手动指定contentType。
• 禁止手动设置Content-Length：无论是原生fetch还是form-data库，都会自动计算并设置正确的content-length，手动设置只会导致不匹配。
• 版本适配：Node.js v18+推荐用原生API，旧版本必须依赖第三方form-data包，两者的FormData用法有差异，不要混用。

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