reactjs - 如何使用 React js 处理非常大的文件下载

Question

我们正在尝试下载大文件，例如 1GB 或 2GB，但在一段时间后，尽管后端仍然在 UI 上显示错误，因为无法获取大文件。

那么我们如何使用React js处理大文件下载

请帮忙!

代码如下:

getFile = async (endpoint: string, id: string, params?: any) => {
  const response = await fetch(
    this.createUrl(endpoint + "/" + id, params),
    this.getRequest("get", {
      Accept: "application/octet-stream",
      "Content-Type": "application/octet-stream",
    }),
  );
  if (response.status === 200) {
    return await response.blob();
  } else {
    throw Error(errorObj.error);
  }
};

downloadFile = (filepath: any) => {
  this.props.api.getFile(resource, filepath, {}).then((res: any) =>
    this.setState(() => {
      const url = window.URL.createObjectURL(new Blob([res]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", path.basename(filepath));
      document.body.appendChild(link);
      link.click();
      link.parentNode!.removeChild(link);
      toaster.success("Successfully downloaded ");
    }),
  );
};

Answer 1

使用 fetch 会将响应缓冲到内存中，并且您不能期望在内存中缓冲 1 到 2 GB。 (您可以使用 IndexedDB 做一些聪明的事情，例如 Mega 所做的，但这可能不值得。)

无需从 URL(我们称之为 URL A)中获取数据并从内容 Blob 创建对象 URL 以放入您单击的下载链接，只需将 URL A 放入下载链接。

如果 URL A 处的端点需要某种身份验证或类似身份验证，您将需要将其更改为可以编码到查询参数中的内容；可能是带有类似于 AWS S3 对预签名 URL 所做的签名的 token 。