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

Question

我正在编写一个Web浏览器应用程序(客户端),它从许多位置下载大量的块并加入它们来构建blob.然后该blob作为公共文件保存到本地文件系统.我这样做的方式是使用ArrayBuffer对象和blob.

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

这适用于中小型文件(直到700 MB aprox),但浏览器崩溃时文件较大.我知道RAM内存有其局限性.情况是我需要构建blob以生成文件,但我想让用户下载比这个大得多的文件(想象一下,例如,大约8GB的文件).

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

Answer 1

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

附加功能

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的部分/块.

部分读功能

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的标题部分 - 我需要知道更多才能提供更准确的反馈.

更新 - 避免配额限制,Temporary vs Persistent 以响应您的评论下面
由于您正在使用临时存储,因此您似乎遇到了存储配额问题.以下是从谷歌借来的片段发现这里

临时存储在浏览器中运行的所有Web应用程序之间共享.共享池最多可占可用磁盘空间的一半.应用程序已使用的存储包含在共享池的计算中; 也就是说,计算基于(可用存储空间+应用程序使用的存储空间)*.5.

每个应用最多可以拥有共享池的20%.例如,如果总可用磁盘空间为50 GB,则共享池为25 GB,应用程序最多可为5 GB.这是从可用磁盘空间(50 GB)的一半(最多25 GB)的20%(最多5 GB)计算得出的.

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

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