H5 でファイル ブレークポイントの再開アップロードを実装する方法

今回は、H5 でファイルのブレークポイント転送を再開する方法と、H5 でファイルのブレークポイント転送を再開する方法に関する 注意点 について説明します。実際のケースを見てみましょう。

HTML5のFILE APIにはBLOB

オブジェクトを分割できるsliceメソッドがあります。フロントエンドは FileList オブジェクトを通じて対応するファイルを取得し、指定された分割方法に従って大きなファイルをセグメントに分割し、それを 1 つずつバックエンドに渡し、バックエンドはファイルを 1 つずつ順番につなぎ合わせます。

アップロード再開の原則

現在、アップロードを再開するには 2 つの一般的に使用される方法があり、1 つは

ファイルアップロード の WebSocket インターフェイスを使用する方法、もう 1 つは ajax を使用する方法です。どちらの方法にも独自の長所と短所があります。 WebSocket はよりハイエンドに聞こえますが、異なるプロトコルを使用することを除けば、他のアルゴリズムは基本的に非常に似ており、サーバーは ws インターフェイスを開く必要があります。ここでは、ブレークポイント アップロードの概念を説明するために、比較的便利な ajax が使用されています。

結局のところ、ブレークポイント再開アップロードの中心的な内容は、ファイルを「スライス」して、それを少しずつサーバーに転送することですが、この一見単純なアップロードプロセスには無数の落とし穴があります。

最初に行うことは、ファイルがいくつかの部分に分割された後、どのようにしてサーバーに何個の部分を切り取ったかを伝える方法、そしてサーバーがアップロードしたファイルを最終的にどのように結合するか、これらすべてを考慮する必要があります。

そのため、ファイルのアップロードを開始する前に、サーバーとの「ハンドシェイク」プロセスを実行し、サーバーにファイル情報を伝え、サーバーとの合意に達した後、スライスのサイズについて合意する必要があります。サーバーにアクセスすると、後続のファイル転送を開始できます。

成功したら、フロントエンドとバックエンドの両方を後続のブレークポイント用にマークする必要があります。

ファイル転送が中断され、ユーザーがファイルを再度選択すると、ロゴを使用してファイルの一部がアップロードされたかどうかを判断できます。アップロードされている場合は、最後の進行状況に従ってファイルのアップロードを続行できます。アップロードを再開する機能を実現します。

ファイルのフロントエンドスライス

HTML5 File API を使用すると、ファイルのカットは想像よりもはるかに簡単です。

sliceメソッドを使うだけ

var packet = file.slice(start, end);

パラメータstartはスライスの開始位置、endはスライスの終了位置です。単位はすべてバイトです。開始と終了を制御することで、ファイルの分割を実現できます

例:

file.slice(0,1000); 
file.slice(1000,2000); 
file.slice(2000,3000); 
// ......

ファイルの断片のアップロード

前のパートでは、スライスメソッドを通じてファイルをいくつかのチャンクに分割しました。 次に何をするか。これらのフラグメントをサーバーに転送するだけです。

ここでは、それを実現するために ajax の

post request を使用します

var xhr = new XMLHttpRequest(); 
var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理 
xhr.open('POST', url, true); 
xhr.onload = function (e){ 
     // 判断文件是否上传成功，如果成功继续上传下一块，如果失败重试该快 
} 
xhr.upload.onprogress = function(e){ 
     // 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度 
     // e.loaded  该片文件上传了多少 
     // e.totalSize 该片文件的总共大小 
} 
xhr.send(packet);

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

H5の保存方法の詳しい説明、

H5の制約検証APIの使い方

以上がH5 でファイル ブレークポイントの再開アップロードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。