javascript - 如何使用 fetch API 在 javascript 中下载具有多个 block 的单个文件

Question

我在我的 React 应用程序中使用 fetch API 从 URL 下载文件。每个 URL 提供一个 block 作为响应。当文件只有一个 block 时，我可以使用 response.blob() 来下载文件。但是，如果单个文件有多个 block ，我必须从 n 个不同的 url 中获取 block ，比如 url1、url2，..等等。我如何组合他们的响应以生成单个 blob 并下载文件。

下面是下载只有一个 block 的文件的代码(从 url-1 获取)。

let downloadUrl = `https://url-1`;
      fetch(downloadUrl, {
        method: 'GET'
      })
        .then(
          (res: any) => {
            if (res.ok && res.status === 200) {
              //File response loaded
            } else {
              return null;
            }
            return res.blob();
          },
          error => {
            // error in downloading
          }
        )
        .then(fileData => {
          if (fileData) {
            let url = window.URL.createObjectURL(fileData);
            let a = document.createElement('a');
            a.href = url;
            a.download = file.fileName;
            a.click();
          }
        });

我可以在获取 API 中发出多个请求并使用 Promise.all(responseArr)。但是如何将他们的响应组合成单个 blob 响应？

Answer 1

您可以使用 fetch() 获取单个 block 然后使用 .arrayBuffer() 将每个响应作为数组缓冲区.

然后你可以使用Blob(array, options)构造函数来创建一个新的 blob，其中包含您刚刚下载的所有数组缓冲区。

例子:

// fetch chunks from somewhere
let urls = ["http://foo.bar/chunk/1", "http://foo.bar/chunk/2"];
let chunkPromises = urls.map(url => {
  return fetch(url).then(res => {
    return res.arrayBuffer();
  });
});

Promise.all(chunkPromises).then(chunks => {
  // combine chunks into a single blob
  let blob = new Blob(chunks, {
    // Optional: specify the MIME Type of your file here
    type: "text/plain" 
  });

  // download the blob
  let url = window.URL.createObjectURL(blob);
  let a = document.createElement('a');
  a.href = url;
  a.download = "Filename.txt";
  a.click();
});