即使在 XMLHttpRequest (JavaScript/ReactJS) 上切片后上传大文件时浏览器崩溃答案

【问题标题】：Browser Crashes when uploading large files even after slicing on XMLHttpRequest (JavaScript/ReactJS)即使在 XMLHttpRequest (JavaScript/ReactJS) 上切片后上传大文件时浏览器崩溃
【发布时间】：2021-09-17 04:36:43
【问题描述】：

一段时间以来，我一直在努力寻找一个明确的答案，因为有些仅适用于大型 CSV 文件。

以下代码非常适用于较小的文件，当大小超过 100 MB 时，上传过程显然会占用大量内存。

我也已经将文件分割成更小的块，但显然是文件的初始读取导致了这个问题。

问题：我应该如何更改以下代码以防止发生崩溃？

 axios.post(`/URL_GOES_HERE`, {
          name: file.name,
          size: file.size,
          md5,
          extension: file.type.split('/')[1]
        })
        .then((response) => {
          const reader = new FileReader();
          reader.onload = (e) => {
         
            const { chunks, type, status } = response.data;
            if (status === 'uploading') {
              let start = 0;
              chunks.forEach(async ({ materialId, size, index }) => {
                window.file0 = file;
                const buf = reader.result.slice(start, start + size);
                const arrayBuf = new Uint8Array(buf);
                start = start + size;
                const url = `URL_FOR_EACH_CHUNK`;

                let xhr = new XMLHttpRequest();
                xhr.open('PUT', url, false);
                xhr.setRequestHeader(
                  'Content-Type',
                  'application/octet-stream'
                );
                xhr.setRequestHeader(
                  'Authorization',
                  `Bearer TOKEN_GOES_HERE`
                );
                xhr.send(arrayBuf);
              });
            }
          };
          reader.readAsArrayBuffer(file);
        })

【问题讨论】：

标签： javascript reactjs file-upload xmlhttprequest filereader

【解决方案1】：

这是通过切片和读取数据来上传文件的不好方法。直接发送文件而不读取内容

const res = await fetch('URL_GOES_HERE', {
  method: 'post',
  body: file
})
await res.text()

如果你真的需要用块上传它们，那么只需切片 blob 并上传它而不发送数组缓冲区

chunk_to_send = file.slice(start, end)
xhr.send(chunk_to_send)

浏览器将能够将数据作为流传输并上传，而无需担心内存问题

【讨论】：