可讀流得到一個 blob

Question

我正在從我的服務器獲取一張照片。 我知道服務器發送了一個blob ，並且 blob 是正確的。 （服務器顯示字節）。

在客戶端上，我嘗試獲取該blob ：

function createFiles(url){

  fetch('https://....jpg', {
  method: 'POST',
  headers: { Accept: 'application/json'}
  })
.then(response =>  response.body)
.then(body => {
  console.log(body);      //** print a streamable object

      const reader = body.getReader();
      return new ReadableStream({
   start(controller) {
     return pump();
     function pump() {
       return reader.read().then(({ done, value }) => {
         // When no more data needs to be consumed, close the stream
         if (done) {
             controller.close();
             return;
         }
         // Enqueue the next data chunk into our target stream
         controller.enqueue(value);
         return pump();
       });
     }
   }
 })
})
.then(stream => new Response(stream))
.then(response => response.blob())
.then(blob => console.log(blob)) // ** print an empty blob size of 2 .
.catch(err => console.error(err));


}

如果我立即打印body ，我會看到一個 object ，它是ReadableStream 。 （鎖定：假）

當我在最后打印blob時，我得到一個type = ""和size = 2的空blob 。

但應該是照片。

我怎樣才能從fetch中得到這個 blob？

Answer 1

服務器響應已經是 ReadableStream。

你可以試試這個。

 fetch(url) // and you know it is a file you.then(response => response.blob()) // this will give you the blob you wanted.then(blob => console.log(blob.size)).catch(err => {console.log(err})