如何在JavaScript中保存需要客戶端處理的大文件

Question

我正在制作一個端到端加密的簡單文件上傳器。 我有上傳/加密，但我不知道如何保存較大的文件而不會導致內存過載。 比方說，我有一個2gb的文件，我會用1kb的塊來解密它。 但是，一旦我擁有所有這些塊（作為緩沖區或blob），我如何將它們作為流保存在本地？ 我找到了這個

var json = JSON.stringify(data),
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);

但對於大文件，我認為這只會導致瀏覽器崩潰。

編輯：我發現這說明blob的內存限制，如果500MiB，這肯定是太低了。 我有什么選擇嗎？

Answer 1

您可以在一次調用new Blob([all,your,chunks])連接所有arrayBuffers或Blob。

 // a simple array to store all our chunks var chunks = []; function processChunks() { // concatenate all our chunks in a single blob var blob = new Blob(chunks); // do something with this final blob var img = new Image(); img.src = URL.createObjectURL(blob); document.body.appendChild(img); } var xhr = new XMLHttpRequest(); xhr.onload = function() { var b = this.response; // here we slice our blob for (var i = 0; i < b.size; i += 1000) { chunks.push(b.slice(i, i + 1000)); } console.log(chunks.length); processChunks(); } xhr.responseType = 'blob'; xhr.open('get', 'https://dl.dropboxusercontent.com/s/nqtih1j7vj850ff/c6RvK.png'); xhr.send(); 

 img { width: 100vw; height: 100vh }