Geek Answers Handbook

How can I send binary data (blob) using fetch and FormData?

The following code is working properly. Open the " https://wiki.epfl.ch/ " page in Google Chrome and execute this code in the developer console. Note: the page https://wiki.epfl.ch/test.php "does not exist and therefore does not load, but this is not a problem.

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

He writes:

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

Go to the "Developer Network" tab, select the "test.php" page, go to "Requested Payload:" and you can see this content:

------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"}

, " ", "test.php" , " :" , , :

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


------WebKitFormBoundaryYoibuD14Ah2cNGAd--

. -, , wiki.epfl.ch. , ( Cross-Origin). "test.php" php, $_POST['content'] response.text(), response.blob() . , , " " " :" , .

: ?

+6
3

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

 });
0

, .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, API FormData, PHP .

+1

, , , .

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

More articles:


All Articles