Javascript 如何使用fetch和FormData发送二进制数据（blob）？

以下代码按预期工作。在Google Chrome上打开“”页面，并在开发者控制台上执行此代码。注意：页面“”不存在，因此无法加载，但这不是问题所在

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�����;¢�
...

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

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

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

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


------WebKitFormBoundaryYoibuD14Ah2cNGAd--

---

注意：我正在开发的网页不是wiki.epfl.ch。我提供了这个示例，以便用户可以尝试它（并避免“跨源资源共享”问题）。我的“test.php”页面是用php编写的，

$\u POST['content']

在使用

response.text（）

时返回内容，但在使用

response.blob（）时返回空。因此，即使开发人员网络选项卡“请求的有效负载：”没有显示二进制数据，这种截取仍然不起作用


问题是：如何在不被修改的情况下获取和发送二进制数据？
尝试一下，通过将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);

 });

如果要发送二进制文件，请不要使用该方法，因为该方法会返回使用UTF-8解码的文件，这不是您想要的。相反，使用不尝试解码文件的方法，并将其直接用作第二个的
正文
参数，因为它允许是：

有关解析此上载格式的信息，请参阅

如果您想将其作为
多部分/表单数据
格式化附件的一部分上传，您仍然可以使用
表单数据
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 });

请尝试使用此代码，希望它能帮助您

 pdfcall(){
var xmlhttp = new XMLHttpRequest(),
method = 'GET',
 xmlhttp.open(method, url, true);
  xmlhttp.responseType = 'blob';
  xmlhttp.onload = (e: any) => {
   console.log(xmlhttp);
if (xmlhttp.status === 200) {
  let blob = new Blob([xmlhttp.response], {type: 'application/pdf'});
  this.pdfSrc = URL.createObjectURL(blob);
  }
};
 xmlhttp.onerror = (e: any) =>{
  console.error(e,'eerr')
    }
  xmlhttp.send();
}

“可能问题在于
response.blob（）
返回一个blob对象”Body.blob（）

与问题的关系如何？我已经更新了问题的更多细节第二种方法（使用

blob（）

）确实发送数据。我假设Chrome开发工具不会显示该值，因为它是乱码二进制数据，但是如果您在Fiddler中查看请求，您可以看到数据正在发送。你有没有办法检查它是否被正确接收？据我所知，实际上没有显示任何文件已收到的确认信息（甚至是用于此目的的吗？）参见：，与您所面临的问题非常相关。我认为chrome中不会显示二进制格式的块。这也是一个非常好的答案，虽然我没有指定我需要使用多部分/表单数据来传递其他值。仅供参考，在此处使用

FileReader

API来缓冲

Blob

完全没有必要。直接接受

内容

作为

值

，而不是将其缓冲到

读取器。结果

。若要了解如何在不使用

文件读取器的情况下使用
FormData
，请参阅的第二部分。
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 });

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 });

 pdfcall(){
var xmlhttp = new XMLHttpRequest(),
method = 'GET',
 xmlhttp.open(method, url, true);
  xmlhttp.responseType = 'blob';
  xmlhttp.onload = (e: any) => {
   console.log(xmlhttp);
if (xmlhttp.status === 200) {
  let blob = new Blob([xmlhttp.response], {type: 'application/pdf'});
  this.pdfSrc = URL.createObjectURL(blob);
  }
};
 xmlhttp.onerror = (e: any) =>{
  console.error(e,'eerr')
    }
  xmlhttp.send();
}