将 Blob 附加到表单数据会引发类型错误：source.on 不是函数

Question

我在将 blob 附加到 FormData 时遇到了一个奇怪的问题。根据文档（https://developer.mozilla.org/en-US/docs/Web/API/FormData/append），追加函数可以是 String 或 Blob。我的代码是这样的：

const blobFromSync = (...args) =>
  import('node-fetch').then(({ blobFromSync }) => blobFromSync(...args));

let file_location = '/path/to/video/file.mp4';

const file = await  blobFromSync(file_location);

const chunkSize = 40000;

for (let start = 0; start < file.size; start += chunkSize) {
            const chunk = file.slice(start, start + chunkSize + 1)
            
            const form = new FormData();
           
            form.append('file', chunk, 'an-id');
}

控制台记录该块显示它是一个 Blob，但它抛出此错误：

TypeError: source.on is not a function
    at DelayedStream.create (/Users/xxxxxxxxx/Development/terminal-backend/node_modules/delayed-stream/lib/delayed_stream.js:33:10)
    at CombinedStream.append (/Users/xxxxxxx/Development/terminal-backend/node_modules/combined-stream/lib/combined_stream.js:45:37)
    at FormData.append (/Users/xxxxxxxxx/Development/terminal-backend/node_modules/form-data/lib/form_data.js:75:3)
    at /Users/xxxxxxxxxn/Development/terminal-backend/src/server.js:90:18

我在这里忽略了什么？

Answer 1

MDN 上的官方文档与 WHATWG FormData API 标准相关，其中指出

form.append

接受

Blob

作为第二个参数。请注意，这只是一个规范（而不是实现）。

您使用的实现不支持

Blob

，如本问题中突出显示的。正如doc中也提到的。

但是，您可以使用

Buffer

从您的

Blob

创建一个

Buffer.from(<blob>)

，它应该可以工作。

P.S.：感谢 @Kaiido 指出 WHATWG 规范并找到 github 问题。

Answer 2

这可行，但还有一件事是不要忘记在 FormData 选项中包含文件名。

这里的数据是我从supabase得到的

    const data = await this.uploadService.downloadFileFromSupabase(audiofileurl);

从'form-data'导入*作为FormData；

从 'node:buffer' 导入 { Buffer };

  const formData = new FormData();
  const buf = await data.arrayBuffer(); // here data is Blob - Blob { size: 97728, type: 'audio/wav' }
  // convert blob to buffer as formdata doesnot accept it directly.
  formData.append("file", Buffer.from(buf),{
    filename:"audio.wav",
  });
  const apiResult = await axios.post(ENDPOINT,formData);