2016-12-18 6 views
2

私はエンドツーエンドの暗号化を使用して簡単なファイルアップローダーを作っています。アップロード/暗号化がダウンしていますが、メモリオーバーロードを起こさずに大きなファイルを保存する方法がわかりません。たとえば、2GBのファイルを持っているとしましょう。たとえば、1kbの塊で解読します。しかし、いったんこれらすべてのチャンク(バッファまたはブロブのいずれか)を取得すると、それらをストリームとしてローカルに保存するにはどうすればよいですか?私はthisJavaScriptでクライアント側の処理が必要な大きなファイルを保存する方法

が、私はそれだけで、ブラウザがクラッシュする原因と思うと、大きなファイルで見つかりました。

編集:確かに低すぎる500MiBの場合は、ブロブのメモリ制限を示すthisが見つかりました。私はここにオプションがありますか?

+2

それは手段 "ブラウザにファイルをアップロード" 何不明です。通常、ブラウザはサーバーからファイルをダウンロードしたり、ファイルをサーバーにアップロードしたりします。また、どこからチャンクを得るのかは不明です。私はあなたがしようとしていることをより良いアイデアにするために、問題のコード化の試みを見なければならないと思います。参考までに、ガイドラインごとに、あなたの質問は理解するために外部リンクに頼るべきではありません。あなたがこれまでに持っているものを理解できるように、あなたの質問に十分な関連情報(好ましくはこれをコーディングするあなたの試み)を追加してください。 – jfriend00

+0

私はいくつかの情報でそれを更新しました。 –

+1

[Blob/FIleをArrayBufferとして読み込む](https://developer.mozilla.org/en/US/docs/Web/API/FileReader/readAsArrayBuffer)しかし、あなたのノードlibにBlobを直接送ることができれば、 'Blob.slice(start、length)'を使います。新しいBLOB([blobSlice1、blobSlicen]) – Kaiido

答えて

0

new Blob([all,your,chunks])への1回の呼び出しで、すべてのarrayBufferまたはBlobを連結できます。

// a simple array to store all our chunks 
 
var chunks = []; 
 

 
function processChunks() { 
 
    // concatenate all our chunks in a single blob 
 
    var blob = new Blob(chunks); 
 
    // do something with this final blob 
 
    var img = new Image(); 
 
    img.src = URL.createObjectURL(blob); 
 
    document.body.appendChild(img); 
 
} 
 

 
var xhr = new XMLHttpRequest(); 
 
xhr.onload = function() { 
 
    var b = this.response; 
 
    // here we slice our blob 
 
    for (var i = 0; i < b.size; i += 1000) { 
 
    chunks.push(b.slice(i, i + 1000)); 
 
    } 
 
    console.log(chunks.length); 
 
    processChunks(); 
 
} 
 
xhr.responseType = 'blob'; 
 
xhr.open('get', 'https://dl.dropboxusercontent.com/s/nqtih1j7vj850ff/c6RvK.png'); 
 
xhr.send();
img { 
 
    width: 100vw; 
 
    height: 100vh 
 
}

関連する問題