将客户端生成的数据以块的形式保存为JavaScript文件 [英] Save client generated data as file in JavaScript in chunks

问题描述

我正在用webRTC开发一个FileShare应用程序。我想用JavaScript / HTML来实现客户端。代码应该在客户端浏览器上运行。
我需要通过webRTC下载时保存它们。这些文件可能相当大，我不能完全donwload他们，并将它们保存在一个数组或blob，然后将其作为文件保存到磁盘。

是否有任何API当我收到文件时，允许我将文件保存为块？

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

解决方案

正如@ jordan-grey建议的那样，将块保存为 blob可能是一个解决方案，如果：
$ b

• 块的持久性是不需要的（即关闭浏览器将删除所有的块）


• 只有用户将文件保存到自己的文件系统才能保存该文件。除非用户再次访问保存的文件，否则Web应用程序将无法访问该文件。


• 可能的话，如果文件大小不是太大将不得不基准发现）。对于总共1GB的块，Chrome对我来说相当不错。
jsfiddle.net/tgWM8/3/rel =noreferrer>使用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] =新的Blob（[typedArray]，{type：mime}）; 
 console.log（'added chunk'，currentChunk）; 
 currentChunk ++; 
 if（currentChunk == totalChunks）{
 console.log（'all chunks completed'）; 
 finalBlob =新的Blob（chunkBlobs，{type：mime}）; 
 document.getElementById（'completedFileLink'）。href = URL.createObjectURL（finalBlob）; 
} else {
 window.setTimeout（addChunk，waitBetweenChunks）; 
} 
} 
 addChunk（）; 
  

如果您确实需要持久性，W3C 文件系统API 应该支持你所需要的。您可以使用它来编写块来分隔文件，然后当所有的块都完成后，您可以将它们全部读取并附加到单个文件中，然后删除块。



注意，它的工作方式是为应用程序分配一个沙盒文件系统（对于给定的配额），并且这些文件只能被该应用程序访问。如果这些文件是为了在Web应用程序之外使用，则可能需要使用该功能将文件从应用程序文件系统保存到其正常文件系统。您可以使用 createObjectURL（）方法做类似的事情。




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




I'm developing a FileShare application with webRTC. I want to implement the client in JavaScript/HTML. The code should be run on the clients browser. I need to save them when downloaded via webRTC. The files can be quite big and I can't completely donwload them and save them in a array or blob before saving them to disk as a file.

Is there any API that allows me to save the file in chunks as I recieve them?

I have found so far Downloadify, FileSave.js and html5 FileWriterApi so far. While the first two are not chunked and require me to first download the complete file to memory before saving, the FileWriterAPI is not available on most browsers.

解决方案

As @jordan-gray suggested, saving the chunks in blobs and joining them to a larger blob might be a solution if:

• Persistence of chunks is not needed (i.e. closing the browser will delete all chunks)
• The file is persisted only by the user saving it to his own filesystem. The web application will not have access to the file once it is closed, unless the user gave access to the saved file again.
• Possibly, if the file sizes are not too big (you'll have to benchmark to find that out). Chrome was behaving quite nice for me for chunks totaling at 1GB.

I've created a simple test for using blobs as chunks. You can play around with the different size and chunk numbers parameters:

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

If you do need that persistence, the W3C File System API should support what you need. You can use it to write the chunks to separate files, and then when all the chunks are completed you can read them all and append them to a single file, and remove the chunks.

Note that it works by assigning a sandboxed filesystem for your application (for a given quota), and the files are only accessible to that application. If the files are meant to use outside of the web application, you might need the function for the use to save the file from the application filesystem to his "normal" filesystem. You can do something like that using the createObjectURL() method.

You are right about current state of browser support. A Filesystem API polyfill is available, which is based on IndexedDB (which is more widely supported) as a filesystem emulation backend. I did not test the polyfill on large files. You might run into size limits or performance limitations.

这篇关于将客户端生成的数据以块的形式保存为JavaScript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！