如何使用 fetch 将上传作为多部分表单数据进行流式传输？

Question

我在 chrome 上，

支持

以八位字节流发送 ReadableStream。如果我提供

ReadableStream

作为

body

到

fetch

，一切正常。但是，如果我将其

append

改为如下所示的

FormData

并提供它，则不起作用。

async function main() {
  const blob = new Blob([new Uint8Array(10 * 1024 * 1024)]);
  const body = new FormData();

  body.append("file", blob.stream());
 
  await fetch(..., {
    method: "POST"
    body: body,
    duplex: "half",
  });
}

这是因为来自附加文档：

如果值不是字符串或 Blob，

append()

会自动将其转换为字符串：

因此，在我的表单中，

file

数据被强制转换为文字文本

[object ...]

，而不是流的实际二进制数据。

如何使用表单数据传输

blob

？ 我必须处理

blob.stream()

，因为我的用例需要

ReadableStream

。

Answer 1

我可以看到此工作的唯一方法是使表单数据（表单字段的纯值或 FormData 对象）成为 blob 的一部分（而不是 FormData、JSON 文档等的 blob 部分）。也许将 multipart/form-data 的内容创建为 blob。

就像这个答案一样：https://stackoverflow.com/a/23517227/322084，您可以在其中看到内容类型为 multipart/form-data 的 POST 请求的结构。