javascript - 如何使用 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.blob()替换response.text()，如下:

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

Answer 1

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

要解析此上传格式，请参阅 this answer .

如果你想将它作为 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 });