将客户端生成的数据保存为JavaScript中的文件

Question

我正在使用webRTC开发FileShare应用程序.我想用JavaScript/HTML实现客户端.代码应该在客户端浏览器上运行.我需要在通过webRTC下载时保存它们.文件可能非常大,我无法完全卸载它们并将它们保存在数组或blob中,然后将它们作为文件保存到磁盘.

是否有任何API允许我在收到文件时将文件保存在块中？

到目前为止我找到了Downloadify,FileSave.js和html5 FileWriterApi.虽然前两个没有分块并且要求我在保存之前首先将完整文件下载到内存,但FileWriterAPI在大多数浏览器上都不可用.

Answer 1

正如@ jordan-grey建议的那样,将块保存在Blob中并将它们连接到更大的blob可能是一个解决方案,如果:

• 不需要持久化块(即关闭浏览器将删除所有块)
• 该文件仅由用户保存到自己的文件系统中.除非用户再次访问已保存的文件,否则Web应用程序在关闭后将无法访问该文件.
• 可能,如果文件大小不是太大(你必须进行基准测试才能找到它).对于总量为1GB的块,Chrome对我来说表现相当不错.

我已经创建了一个使用blob作为块的简单测试.您可以使用不同的大小和块数参数:

var chunkSize = 500000;
var totalChunks = 200;
var currentChunk = 0;
var mime = 'application/octet-binary';
var waitBetweenChunks = 50;

var finalBlob = null;
var chunkBlobs =[];

function addChunk() {
    var typedArray = new Int8Array(chunkSize);
    chunkBlobs[currentChunk] = new Blob([typedArray], {type: mime});
    console.log('added chunk', currentChunk);
    currentChunk++;
    if (currentChunk == totalChunks) {
        console.log('all chunks completed');
        finalBlob = new Blob(chunkBlobs, {type: mime});
        document.getElementById('completedFileLink').href = URL.createObjectURL(finalBlob);
    } else {
        window.setTimeout(addChunk, waitBetweenChunks);
    }
}
addChunk();

如果确实需要持久性,W3C 文件系统API应该支持您所需的内容.您可以使用它将块写入单独的文件,然后在完成所有块后,您可以全部读取它们并将它们附加到单个文件中,然后删除块.

请注意,它的工作原理是为应用程序分配沙盒文件系统(对于给定的配额),并且只能访问该应用程序的文件.如果文件要在Web应用程序之外使用,则可能需要使用该函数将文件从应用程序文件系统保存到其"普通"文件系统.你可以使用createObjectURL()方法做类似的事情.

您对浏览器支持的当前状态是正确的.可以使用Filesystem API polyfill,它基于IndexedDB(受到更广泛支持)作为文件系统仿真后端.我没有在大文件上测试polyfill.您可能会遇到大小限制或性能限制.