大型 ArrayBuffer 因 XMLHttpRequest.send() 而崩溃答案

【问题标题】：Large ArrayBuffer crashes with XMLHttpRequest.send()大型 ArrayBuffer 因 XMLHttpRequest.send() 而崩溃
【发布时间】：2017-09-19 10:06:11
【问题描述】：

我正在尝试在 JavaScript 中使用 XMLHttpRequest() 发送文件。为此，我使用 FileReader 和 readAsArrayBuffer()。

我的代码以这样的结尾：

// 'content' from readAsArrayBuffer
var xhr = new XMLHttpRequest();
xhr.open("POST", "url", true);
xhr.send(content);

现在，取决于浏览器/计算机，当我尝试将 send(ArrayBuffer) 与大型 ArrayBuffer（例如 1GB 文件）一起使用时，浏览器会崩溃...

这是一个演示：https://codepen.io/Aymkdn/pen/xXZMwV（只需点击测试按钮）

此演示创建一个 1GB 的 ArrayBuffer 并尝试将其上传到某个 url。我在 3 台计算机上尝试过，最后一台是 Chrome 和 Firefox。 100% 的 Chrome 浏览器崩溃，66% 的 Firefox 浏览器崩溃。

我在这里遗漏了什么吗？传递给send() 的数据是否有大小限制？

谢谢

【问题讨论】：

在服务器或webconfig中，你必须增加uploadlimit。我认为默认设置是 5 mb
通常在发送大文件时，您不会将整个内容加载到内存中，而是加载块，然后发送这些块。这还有其他优点，比如可以做简历、进度条等。不过，这需要做更多的工作，因为双方必须就一个简单的协议达成一致。但从长远来看非常值得。
Alen > 这不是服务器端的问题，浏览器在发送之前就崩溃了。 Keith > 是的，但我使用的服务器不支持该块 :-(

标签： javascript xmlhttprequest

【解决方案1】：

经过不同的测试，似乎最简单的解决方法是发送Blob 而不是ArrayBuffer。

// 'content' from readAsArrayBuffer, so it's an ArrayBuffer
var xhr = new XMLHttpRequest();
xhr.open("POST", "url", true);
xhr.send(new Blob([content])); // transform ArrayBuffer into Blob

在这种情况下，浏览器不会再崩溃了！

【讨论】：