Node.js は IE789 と互換性のあるファイル アップロードの進行状況バーを実装します

ファイルアップロードの Nodejs 処理

Express4 では、req.files はすでに定義されていません。現在、最も一般的に使用されているものには、進行状況イベントがあるため、IE の以前のバージョンでは非常に便利です。 OK、試してみてください:

form
.on('error',function(err){
 console.log(err);
})
.on('aborted',function(){
 console.log('aborted');
})
.on('progress',function(bytesReceived, bytesExpected){
 var n=parseInt(parseFloat(bytesReceived/bytesExpected).toFixed(2)*100);
 console.log(n);
});

はい、予想通りに一連の進行状況の値がコンソールに出力されたことを確認して、さらに 1 歩進みます。 call メソッドは、ページに進行状況の値を表示します。残念ながら、アップロードの具体的で詳細な進行状況の値を再度確認することはできません。進行状況の値をセッション内に保存し、進行状況の値をポーリングする追加のリクエストを追加します。リクエストの進行状況値が、他のアップロードの進行状況値ではなく、現在のアップロードの進行状況値であることを確認するには、アップロード リクエストと追加のリクエストのトークン値に同意する必要があります。リクエスト時に値を指定するには このトークンを取得した後、ファイルアップロードのリクエストボディがリクエストペイロードにあるため、req.bodyは渡された値を取得できません。もちろん、このパイルを解析することはできません。問題は、トークンを 2 回更新する必要があることですが、これは良くありません。クッキーに入れるしかない！

form
.on('progress',function(bytesReceived, bytesExpected){
 var n=parseInt(parseFloat(bytesReceived/bytesExpected).toFixed(2)*100);
 res.write(&#39;<script>window.parent.call(&#39;+n+&#39;)</script>&#39;);
 //无刷新上传，你们懂的 console.log(n);
});

IE789 の場合、私は進行状況の値をポーリングするために来ました。申し訳ありませんが、本当に心が痛みます

残念ながら、呼び出しメソッドで進行状況の値を表示できるのは私だけです。最後の 100% を参照してください。しかし、アップロードの具体的かつ詳細な進行状況の値が表示されません。さらに調査してみましょう...

さて、また問題が発生しましたが、まだ何かがおかしいと感じています。 Ajax ポーリングに問題がありますが、問題はセッションにあります。アップロードが完了するまで値は表示されないため、進行中の値は 100% しか表示されず、詳細な進行状況は表示されません。 .write と今回の req.session は一時停止されますが、進行が完了するまで各実行の結果が保存され、その後解放されるため、100% しか見ることができません。恐るべし、もちろん理解できないのでとりあえずそう思っておきます！

Ajaxポーリングには問題がないので、セッションに保存しても機能しない場合は、グローバルオブジェクトに値を入れてみるとハングしません。少し変更を加えてグローバル オブジェクトに追加します:

var cookies=function () {
 var cks=req.headers.cookie.split(';'),obj={};
 for(var i=0;i<cks.length;i++){
  obj[cks[i].split(&#39;=&#39;)[0].replace(/\s+/ig,&#39;&#39;)]=unescape(cks[i].split(&#39;=&#39;)[1]);
 }
 return obj;
}();
var queryToken=cookies.__token__;
 
form .on(&#39;progress&#39;,function(bytesReceived, bytesExpected){
 var n=parseInt(parseFloat(form.bytesReceived/form.bytesExpected).toFixed(2)*100);
 if (req.session[&#39;file&#39;+queryToken]) { 
  req.session[&#39;file&#39;+queryToken].percent=n;
 }else{
  req.session[&#39;file&#39;+queryToken]={
   token:queryToken,
   percent:n
  }
 };
 console.log(n);
});

ポーリングを続行します。

美しい、まさにその通りです！ Chrome で表示される内容は、IE789 で少し引っかかる点を除けば、HTML5 の進捗状況と同じです。しかし、結局のところ、古いブラウザはあまり優れていません。はい、ファイルがアップロードされるたびに値がグローバルに追加されます。ファイルがアップロードされて指定されたディレクトリに転送された後は、global['file'+queryToken]=null; のようにする必要があります。ポーリングは、多くのリクエストを受信した後に問題が発生する可能性があります。制限して 500 ミリ秒ごとに進行状況の値をリクエストしてみてはいかがでしょうか。IE789 の進行状況バーは次のように解決され、フラッシュは約束どおり破棄されます。ポーリングはすべてのブラウザ サーバーと互換性がありますが、結局のところ、非常に多くのリクエストが無駄になるため、判断して IE789 以外でも HTML5 を継続することをお勧めします。

実際、それを比較検討すると、追加の Flash アップロードと追加のリクエストを追加する価値があるのはどちらでしょうか? Flash については詳しくないので、これ以上は言いません。ページに追加のファイルを追加する;

概要

ファイル アップロード コンポーネントに関しては、まだ多くの詳細を処理する必要があります。当初は JS ファイルを作成したいと考えていましたが、より再利用しやすくするために、次のように考えました。アップロードする必要がある場合は、独立したページとして作成し、iframe するだけです。これは、JS ファイルを作成するよりもはるかに優れています。以上がこの記事の内容です。皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問がございましたら、メッセージを残してください。