xhr Upload Fortschritt während Express.js multer

Question

mit Ich versuche, XHR zu verwenden Fortschritte zu verfolgen hochladen, aber an meinem OnProgress Rückruf bei event.total ich nur Content-Length von Response-Header statt Upload Dateigröße erhalten:

xhr.onprogress = (event) => { 
    console.log('Progress ' + event.loaded + '/' + event.total); 
} 

ich benutze Multer das Hochladen von Dateien zu handhaben und es scheint nicht verfügbar ist das Hochladen von Dateien standardmäßig zu handhaben: https://github.com/expressjs/multer/issues/243

Also habe ich versucht, mit dem Fortschritt-Stream-Upload zu handhaben:

var p = progress({ time: 1 }); 
    request.pipe(p); 

    p.on('progress', function() { 
    console.log('Progress...'); 
    }); 

Aber es funktioniert auf die gleiche Weise, ich bekomme nur onle "Progress ..." bei Protokoll und bei XHR onprogress event.total Ich habe nur Content-Length-Wert anstelle der Dateigröße Wert. Hilfe bitte, ich habe keine Ahnung, wie ich es beheben kann!

Answer 1

Sie benötigen keine Fortschritte im Backend, wenn Sie den Fortschritt anzeigen möchten, müssen Sie nur wissen, was Sie von Ihrem Frontend zum Backend gesendet haben, damit Sie den Upload-Fortschritt berechnen können.

In Ihrem Frontend Js oder .html, versuchen, etwas wie folgt aus:

var formData = new FormData(); 
var file = document.getElementById('myFile').files[0]; 
formData.append('myFile', file); 
var xhr = new XMLHttpRequest(); 

// your url upload 
xhr.open('post', '/urluploadhere', true); 

xhr.upload.onprogress = function(e) { 
    if (e.lengthComputable) { 
    var percentage = (e.loaded/e.total) * 100; 
    console.log(percentage + "%"); 
    } 
}; 

xhr.onerror = function(e) { 
    console.log('Error'); 
    console.log(e); 
}; 
xhr.onload = function() { 
    console.log(this.statusText); 
}; 

xhr.send(formData); 

Im Backend Sie nur einen einfachen Endpunkt wie diese benötigen:

app.post('/urluploadhere', function(req, res) { 
    if(req.files.myFile) { 
    console.log('hey, Im a file and Im here!!'); 
    } else { 
    console.log('ooppss, may be you are running the IE 6 :('); 
    } 
    res.end(); 
}); 

Multer auch notwendig ist, und denken Sie daran , xhr funktioniert nur in modernen Browsern.