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!

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

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:

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;

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