javascript - 巨大的 JavaScript HTML5 blob(来自大型 ArrayBuffers)在客户端构建一个巨大的文件

Question

我正在编写一个 Web 浏览器应用程序(客户端)，它从许多位置下载大量 block 并将它们连接起来构建一个 blob。然后将该 blob 作为普通文件保存到本地文件系统。我这样做的方式是通过 ArrayBuffer 对象和一个 blob。

var blob = new Blob([ArrayBuffer1, ArrayBuffer2, ArrayBuffer3, ...], {type: mimetype})

这适用于中小型文件(大约 700 MB)，但浏览器会因较大的文件而崩溃。我知道 RAM 内存有其局限性。情况是我需要构建 blob 以生成文件，但我想允许用户下载比该大小大得多的文件(想象一下，例如，大约 8GB 的​​文件)。

¿如何构建 blob 以避免大小限制？ LocalStorage 比 RAM 更受限制，所以我不知道该使用什么或如何使用它。

Answer 1

看起来您只是将数据数组连接在一起？为什么不将数组缓冲区附加到一个巨大的 blob 中。您必须一次迭代并追加每个 arrayBuffer。您将 seek 到文件编写器的末尾以附加数组。并且为了只读回你的巨大 blob 的一部分，你会得到一个 blob 的 slice 以避免浏览器崩溃。

追加函数

function appendToFile(fPath,data,callback){
    fs.root.getFile(fPath, {
        create: false
    }, function(fileEntry) {
        fileEntry.createWriter(function(writer) {
            writer.onwriteend = function(e) {
                callback();
            };
            writer.seek(writer.length);
            var blob = new Blob([data]);
            writer.write(blob);
        }, errorHandler);
    }, errorHandler);
}

再次避免读取整个 blob，在生成您提到的文件时只读取巨型 blob 的部分/ block 。

部分读取功能

function getPartialBlobFromFile(fPath,start,stop,callback){
    fs.root.getFile(fPath, {
        creation:false
    }, function(fileEntry){
        fileEntry.file(function(file){
            var reader = new FileReader();
            reader.onloadend = function(evt){
                if(evt.target.readyState == FileReader.DONE){
                    callback(evt.target.result);
                }
            };
            stop = Math.min(stop,file.size);
            reader.readAsArrayBuffer(file.slice(start,stop));
        }, errorHandler)
    }, errorHandler);
}

您可能必须保留索引，也许在您的巨型 BLOB 的 header 部分 - 我需要了解更多信息才能提供更准确的反馈。

---

更新 - 避免配额限制，临时与持久 回应您在下方的评论
您似乎遇到了存储配额问题，因为您使用的是临时存储。以下是从 google 上找到的摘录 here

Temporary storage is shared among all web apps running in the browser. The shared pool can be up to half of the of available disk space. Storage already used by apps is included in the calculation of the shared pool; that is to say, the calculation is based on (available storage space + storage being used by apps) * .5 .

Each app can have up to 20% of the shared pool. As an example, if the total available disk space is 50 GB, the shared pool is 25 GB, and the app can have up to 5 GB. This is calculated from 20% (up to 5 GB) of half (up to 25 GB) of the available disk space (50 GB).

要避免此限制，您必须切换到持久性，它将允许您对磁盘上可用的可用空间进行配额。为此，请使用以下内容来初始化文件系统而不是临时存储请求。

navigator.webkitPersistentStorage.requestQuota(1024*1024*5, 
  function(gB){
  window.requestFileSystem(PERSISTENT, gB, onInitFs, errorHandler);
}, function(e){
  console.log('Error', e);
})