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

编程问答 2022-04-21

问题描述

一段时间以来，我一直试图找到一个明确的答案，因为有些只适用于例如大型 CSV 文件。

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

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

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

{'executed':true/false}

解决方法

这是一种通过切片和读取数据上传文件的糟糕方式。 直接发送文件而不读取内容

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)

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

file-uploadfilereaderjavascriptreactjsreactjsreactjsreactjsxmlhttprequestxmlhttprequest