将Blob附加到表单数据时，抛出TypeError：source.on不是函数

Question

我在将Blob附加到FormData时遇到了奇怪的问题。根据文档（https://developer.mozilla.org/en-US/docs/Web/API/FormData/append），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

这里我忽略了什么？

- Devin Dixon

---

这似乎是链条下面的事情，可能是在消耗form的地方？看起来好像有些东西期望一个流，但没有得到。 - Matt

@Matt，最终它应该作为一个POST请求放在fetch中，以上传大文件，但我已经把所有这些都拿掉了，现在代码只执行append函数。 - Devin Dixon

我认为MDN文档可能有点过时。form-data的官方github页面指出，第二个参数应该是字符串、整数、布尔值或缓冲区。https://github.com/form-data/form-data#void-append-string-field-mixed-value--mixed-options-. 因此，在您的情况下，Buffer.from(<your blob>)应该可以工作。 - Rahul Sharma

@RahulSharma MDN的文章是关于WHATWG FormData API，而不是npm库。它并非“过时”。但你是对的，他们不支持Blobs作为输入（https://github.com/form-data/form-data/issues/529）。值得一提的是，FormData现在在node > 17中得到了本地支持（即使仍然标记为实验性），就像fetch一样。如果一个人不怕使用实验性功能，那么就不再需要库了。 - Kaiido

@RahulSharma 您的Buffer.from答案有效。我的代码是form.append('file', Buffer.from(await chunk.arrayBuffer()), event_id);。将其作为答案，我会标记它为正确的。 - Devin Dixon

Answer 1

MDN 的官方文档与 WHATWG FormData API 标准有关，该标准表示 form.append 接受 Blob 作为第二个参数。请注意，这只是一个规范（而非实现）。

您正在使用的实现不支持 Blob，如此在这个问题中已经强调。同样也在文档中提到。

然而，您可以使用 Buffer.from(<blob>) 将您的 Blob 创建为 Buffer，这样应该就可以正常工作了。

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

- Rahul Sharma