Node.js implementiert einen Fortschrittsbalken für den Datei-Upload, der mit IE789 kompatibel ist

Nodejs-Verarbeitung von Datei-Uploads

In Express4 ist req.files jetzt wahrscheinlich beeindruckend. Sie wissen, dass es ein Fortschrittsereignis gibt, also sind Sie überglücklich der Version IE funktioniert; OK, probieren Sie es aus:

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

Ja, es freut Sie, die Konsole druckt wie erwartet. Eine Reihe von Fortschritten Werte; dann gehen Sie einen Schritt weiter;

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

Die Aufrufmethode zeigt den Fortschrittswert auf der Seite an; leider können Sie nur den Endwert 100 sehen %, Sie können den spezifischen und detaillierten Fortschrittswert des Uploads nicht sehen. Lassen Sie uns die Idee ändern und es versuchen. Speichern Sie den Fortschrittswert in der Sitzung und fügen Sie eine zusätzliche Anfrage hinzu Umfrage zum Fortschritt. Es lohnt sich, oh, nicht schlecht! Um sicherzustellen, dass der Fortschrittswert Ihrer Anfrage dem Fortschrittswert Ihres aktuellen Uploads und nicht dem Fortschrittswert anderer Uploads entspricht, müssen Sie sich in der Upload-Anfrage und bei weiteren Anfragen auf einen Token-Wert einigen. Nun stellt sich eine weitere Frage: Wie Um den Wert bei der Anforderung anzugeben, kann req.body den übergebenen Wert nicht abrufen. Da sich der Anforderungstext des Datei-Uploads in der Anforderungsnutzlast befindet, kann ich diesen Stapel natürlich nicht analysieren. Es ist am besten, es in die URL einzufügen. Das Problem ist, dass man das Token manchmal zweimal aktualisieren muss, was nicht gut ist. Ich habe keine andere Wahl, als es in einen Keks zu stecken!

Für IE789 bin ich gekommen, um den Fortschrittswert abzufragen.

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

Die Aufrufmethode zeigt den Fortschrittswert auf der Seite an. Leider können Sie nur die letzten 100 % sehen und den spezifischen und detaillierten Fortschrittswert des Uploads nicht erneut sehen. .

var getData=function(){
 $.post('/uploader',{
  getfileinfo:1,
  uploadtoken:utils.cookie.getCookie('__token__')
 })
 .then(function(data){
  console.log(data);
  if (data.mes<0) {
   getData();
  }else{
   var pros=data.info;
   call(pros.percent);
   if (pros.percent!=&#39;100&#39;) {
    getData();
   };
  };
 });
}
getData();

Okay, ich bin wieder in Schwierigkeiten geraten, aber ich habe immer noch das Gefühl, dass etwas mit der Ajax-Abfrage nicht stimmt. Das Problem ist, dass der Wert in der Sitzung warten muss, bis der Upload abgeschlossen ist Ich kann nur 100 % sehen, aber keinen detaillierten Fortschrittswert. Ich denke, dass der vorherige res.write und dieses Mal req.session angehalten werden, aber jedes Ausführungsergebnis gespeichert wird, bis der Fortschritt abgeschlossen ist veröffentlicht es, also kann nur ich es zu 100 % sehen; ich bin nicht in der Stimmung, mir den Quellcode von formidable anzusehen, also denke ich es erst einmal!

Da Ajax-Polling in Ordnung ist, ist das Speichern in der Sitzung kein Problem. Wenn es nicht funktioniert, versuchen Sie, es in das globale Objekt einzufügen. Es bleibt nicht hängen, wenn Sie einen Wert in das globale Objekt einfügen Nehmen Sie Änderungen vor und fügen Sie sie global ein:

Abfrage fortsetzen.

form
.on('progress',function(bytesReceived, bytesExpected){
 var n=parseInt(parseFloat(form.bytesReceived/form.bytesExpected).toFixed(2)*100);
 if (global['file'+queryToken]) {
  global['file'+queryToken].percent=n;
 }else{
  global['file'+queryToken]={
   token:queryToken,
   percent:n
  }
 };
 console.log(n);
});

Wunderschön, genau so! Was Sie in Chrome sehen, ist das gleiche wie der Fortschritt von HTML5, außer dass es sich im IE789 etwas festgefahren anfühlt, aber Sie können immer noch den detaillierten Fortschrittswert sehen, wissen Sie auch; Ja, bei jedem Hochladen der Datei werden Werte hinzugefügt. Nachdem die Datei hochgeladen und in das angegebene Verzeichnis übertragen wurde, gilt: global['file'+queryToken]=null;

Die runde Abfrage bedeutet jedoch viele, viele Anfragen nacheinander, und hier kann es zu Problemen kommen. Warum nicht alle 500 ms den Fortschrittswert anfordern, der IE789-Fortschrittsbalken wird so gelöst, und der Flash wird wie versprochen verworfen; diese Abfrage ist zwar mit allen Browsern kompatibel, aber schließlich werden so viele Anfragen verschwendet, daher ist es besser, ein Urteil zu fällen und HTML5 neben IE789 fortzusetzen!

In der Tat, was ist es wert, einen zusätzlichen Flash-Upload oder eine zusätzliche Anfrage hinzuzufügen? Verzeihen Sie mir, dass ich Flash nicht kenne, also werde ich nicht mehr sagen Ich mag es nicht, der Seite zusätzliche Dateien hinzuzufügen. ;

Zusammenfassung

Was die Datei-Upload-Komponente betrifft, musste ich mich ursprünglich noch um eine JS-Datei kümmern Ich habe darüber nachgedacht, es wiederverwendbar zu machen. Es ist definitiv besser, unabhängige Seiten zu erstellen, als eine zu erstellen JS-Datei. Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er kann jedem beim Lernen oder Arbeiten helfen. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen.

Weitere Artikel zur Node.js-Implementierung des IE789-kompatiblen Datei-Upload-Fortschrittsbalkens finden Sie auf der chinesischen PHP-Website!