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

Question

我必须读取用户使用 javascript 的文件 api 上传的大文件。由于这个文件很大，按原样读取它会使浏览器崩溃。因此，我对文件进行切片，它形成了一个 blob 数组(切片方法可以创建任何其他类型的数组吗？)。

JS代码:

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

在此之后，我有一个名为“blob”的 blob 数组。我如何存储这个数组(我正在使用 localforage (indexeddb))。目前我正在按原样存储 blob 数组。

JS代码:

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

        });     
    });

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

检索后 x 将包含我存储的 blob 数组。 现在如何合并此 blob 以将原始文件作为大数据 url？

如果我以类似的方式上传视频？如何合并 blob 数组以形成数据 url 以添加到 html 5 视频标签的属性标签？另外，有人可以提供一些关于 localforage 如何存储这个数组的高级解释吗？是直接设置吗？

Answer 1

blob 构造函数采用缓冲区、字符串和其他 blob 的混合数组:

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