如何通过javascript文件api读取大(>300 MB)图像或视频文件，在本地存储、检索和显示？

Question

我必须读取一个大文件，用户上传使用javascript的文件api。因为这个文件很大，所以读取它会使浏览器崩溃。因此，我将文件切片，它形成一个blobs数组(可以切片方法创建任何其他类型的数组？)。

“联合来文法典”：

var chunkSize = 100000; 
var currentStart = 0;
var currentEnd = Math.min(currentStart+chunkSize, file.size);
while(currentEnd != file.size){
        var blobPart = file.slice(currentStart, currentEnd);
        blobs.push(blobPart);
        currentStart = currentEnd+1;
        currentEnd =  Math.min(currentStart+chunkSize, file.size);
}

在此之后，我就有了一组名为“blobs”的blobs。如何存储这个数组(我使用的是本地牧草(indexeddb))。目前，我正在存储blobs数组的原样。

“联合来文法典”：

    localforage.setItem(file.name,blobs,function(){
        localforage.getItem(file.name, function(err, value){
            var fullRetrievedBlobArray = [];
            var x = value;

        });     
    });

把它转换成别的东西有帮助吗？或者我应该读取blobs数组中的blobs，并将它们转换为一个大数组？(如果是，我该怎么做？)

在检索完之后，x将包含我存储的blobs数组。现在我如何合并这个blob以获得原始文件作为一个大数据url?

​

​

如果我以类似的方式上传视频呢？如何将blob数组合并成一个数据url以添加到html 5视频标记的属性标记中？另外，有人能提供一些关于本地牧草如何存储这个数组的高层次解释吗？它是直接设定的吗？

Answer 1

blob构造函数接受缓冲区、字符串和其他blob的混合数组：

var hugeBlob = new Blob(blobs, {type: "video/mp4"});
document.getElementById("video").src = URL.createObjectURL(hugeBlob);