如何使用 fetch 和 FormData 发送二进制数据 (blob)？

以下代码按预期工作。在 Google Chrome 上打开页面“https://wiki.epfl.ch/”，然后在开发者控制台上执行此代码。注意：页面“https://wiki.epfl.ch/test.php”不存在，因此无法加载，但这不是问题。

response = await fetch("https://wiki.epfl.ch/lapa-studio/documents/DTS/laser%20tutorial.pdf");
response.text().then(function(content) { 
  formData = new FormData();
  console.log(content.length);
  console.log(content);
  formData.append("content", content);

  fetch("https://wiki.epfl.ch/test.php", {method: 'POST', body: formData});
})

It logs:

content.length: 57234
content: %PDF-1.3
%���������
4 0 obj
<< /Length 5 0 R /Filter /FlateDecode >>
stream
x��K��F�����;¢�
...

转到“开发人员网络”选项卡，选择“test.php”页面，导航到“请求的有效负载：”，您可以看到以下内容：

------WebKitFormBoundaryOJOOGb7N43BxCRlv
Content-Disposition: form-data; name="content"

%PDF-1.3
%���������
4 0 obj
<< /Length 5 0 R /Filter /FlateDecode >>
stream
...
------WebKitFormBoundaryOJOOGb7N43BxCRlv

问题在于请求文件是二进制文件 (PDF)，并且文本被“损坏”。它报告的大小为 57234 字节，而实际文件大小（使用wget命令）是 60248 字节。

问题是：如何在不修改的情况下获取和发送二进制数据？

我尝试更换response.text() by response.blob()， 如下：

response = await fetch("https://wiki.epfl.ch/lapa-studio/documents/DTS/laser%20tutorial.pdf");
response.blob().then(function(content) { 
  console.log(content.size);
  console.log(content);
  formData = new FormData();
  formData.append("content", content);

  fetch("https://wiki.epfl.ch/test.php", {method: 'POST', body: formData});
})

现在我得到了这个日志，具有正确的文件大小：

content.size:  60248
content:  Blob(60248) {size: 60248, type: "application/pdf"}

但是，转到“开发人员网络”选项卡，选择“test.php”页面，导航到“请求的有效负载：”，它显示它发送了一个空有效负载：

------WebKitFormBoundaryYoibuD14Ah2cNGAd
Content-Disposition: form-data; name="content"; filename="blob"
Content-Type: application/pdf


------WebKitFormBoundaryYoibuD14Ah2cNGAd--

注意：我正在开发的网页不在 wiki.epfl.ch。我提供这个示例以便用户可以尝试（并避免“跨域资源共享”问题）。我的“test.php”页面是 php 的并且$_POST['content']使用时返回内容response.text()，但使用时返回空response.blob()。因此，即使开发者网络选项卡“请求的有效负载：”不显示二进制数据，这个片段仍然不起作用。

如果您想发送二进制文件，请勿使用.text() https://developer.mozilla.org/en-US/docs/Web/API/Body/text方法，因为它返回使用 UTF-8 解码的文件，这不是您想要的。相反，使用.blob() https://developer.mozilla.org/en-US/docs/Web/API/Body/blob方法，它不会尝试解码文件，而是直接使用它作为body第二个参数fetch() https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters因为它可以成为Blob https://developer.mozilla.org/en-US/docs/Web/API/Blob:

const response = await fetch("https://wiki.epfl.ch/lapa-studio/documents/DTS/laser%20tutorial.pdf");
const content = await response.blob();
console.log(content.size);
fetch("https://wiki.epfl.ch/test.php", { method: 'POST', body: content });

要解析此上传格式，请参阅这个答案 https://stackoverflow.com/a/8945912/1541563.

如果您想将其作为文件的一部分上传multipart/form-data格式化的附件，您仍然可以使用FormDataAPI，但不需要将二进制数据发送到 PHP 脚本。为了完整起见，您可以这样做：

const response = await fetch("https://wiki.epfl.ch/lapa-studio/documents/DTS/laser%20tutorial.pdf");
const content = await response.blob();
console.log(content.size);
const formData = new FormData();
formData.append("content", content);
fetch("https://wiki.epfl.ch/test.php", { method: 'POST', body: formData });