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

Question

以下代码按预期工作。在 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});
})

它记录：

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

转到 Developer Network 选项卡，选择“test.php”页面，导航到“Requested payload:”，您可以看到以下内容：

 ------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() 替换为 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"}

但是，转到 Developer Network 选项卡，选择“test.php”页面，导航到“Requested payload:”，它显示它发送了一个空的有效载荷：

 ------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() 时返回空内容。因此，即使 Developer Network 选项卡“Requested payload:”没有显示二进制数据，这个片段仍然无法正常工作。

原文由 David Portabella 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试这个，通过将 blob 转换为 DataURL 字符串，您可以在不修改的情况下发送二进制数据。

 response = await fetch("https://wiki.epfl.ch/lapa-studio/documents/DTS/laser%20tutorial.pdf");
response.blob().then(function (content) {

    let reader = new FileReader();

    reader.addEventListener("loadend", function () {

      formData = new FormData();
      formData.append("content", reader.result);
      fetch("https://wiki.epfl.ch/test.php", { method: 'POST', body: formData });
      reader.removeEventListener("loadend");

    });

    reader.readAsDataURL(content);

 });

原文由 Waseem Ahmed 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你想发送二进制文件，不要使用 .text() 方法，因为它返回使用 UTF-8 解码的文件，这不是你想要的。相反，使用 .blob() 方法，它不会尝试解码文件，并直接将其用作 body 第二个参数 fetch() 因为它允许成为 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 });

要解析此上传格式，请参阅 此答案。

如果您想将其作为 multipart/form-data 格式附件的一部分上传，您仍然可以使用 FormData API，但不必将二进制数据发送到您的 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 });

原文由 Patrick Roberts 发布，翻译遵循 CC BY-SA 4.0 许可协议