Question

我正在制作一个端到端加密的简单文件上传器。我有上传/加密，但我不知道如何保存较大的文件而不会导致内存过载。让我们举个例子说我有一个2GB的文件，我会用1kb的块来解密它。但是，一旦我拥有所有这些块（作为缓冲区或blob），我如何将它们作为流保存在本地？我找到了this

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

但是对于大文件，我认为这只会导致浏览器崩溃。

编辑：我发现this表示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
}

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

1 个答案: