Question

以下代码按预期工作。在Google Chrome上打开“https://wiki.epfl.ch/”页面，然后在Developer Console上执行此代码。注意：页面“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），文本被“损坏”。当实际文件大小（使用wget命令获取）为60248字节时，它报告的大小为57234字节。

问题是：如何获取和发送二进制数据，而不进行修改？

我尝试将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()时返回空。因此，即使开发人员网络选项卡“请求的有效负载：”不显示二进制数据，此剪切仍然无效。

问题是：如何获取和发送二进制数据，而不进行修改？

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

 });

Answer 2

如果要发送二进制文件，请不要使用.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所必需的脚本。

Answer 3

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

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

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

3 个答案: