将客户端生成的数据保存为 JavaScript 中的文件，分块形式保存

Save client generated data as file in JavaScript in chunks

本文关键字：保存 文件 客户端 数据 JavaScript      更新时间：2023-09-26

我正在使用webRTC开发一个文件共享应用程序。我想用JavaScript/HTML实现客户端。代码应在客户端浏览器上运行。我需要在通过webRTC下载时保存它们。这些文件可能非常大，在将它们作为文件保存到磁盘之前，我无法完全卸载它们并将它们保存在数组或 blob 中。

是否有任何 API 允许我在收到文件时以块的形式保存文件？

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

正如 @jordan-gray 所建议的那样，在以下情况下，将块保存在 blob 中并将它们连接到更大的 blob 可能是一种解决方案：

  • 不需要块的持久性(即关闭浏览器将删除所有块(
  • 该文件仅由用户将其保存到自己的文件系统来保留。Web 应用程序在关闭文件后将无法访问该文件，除非用户再次授予对已保存文件的访问权限。
  • 可能，如果文件大小不是太大(您必须进行基准测试才能找到答案(。Chrome对我来说表现得非常好，总共有1GB的块。

我创建了一个将 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(( 方法执行类似操作。

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

你检查 https://github.com/Peer5/Sharefest 了吗？它应该满足您的要求

相关文章：