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

Question

一段时间以来，我一直在努力寻找明确的答案，因为有些答案仅适用于大型 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);
        })

Answer 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)

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

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

Browser Crashes when uploading large files even after slicing on XMLHttpRequest (JavaScript/ReactJS)

javascript

reactjs

file-upload

xmlhttprequest

filereader