XHR прогресс загрузки при использовании expressjs multer

Question

Я пытаюсь использовать XHR для отслеживания загрузки прогресса, но в моем OnProgress обратного вызова в event.total я только получаю Content-Length из заголовка ответа Вместо загрузку размера файла:

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

Я использую Multer для обработки загрузки файлов и, кажется, не доступна для обработки загрузки файлов по умолчанию: https://github.com/expressjs/multer/issues/243

Так что я попытался справиться загрузки с прогресс-потока:

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

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

Но он работает одинаково, я получаю onle «Progress ...» в журнале и в XHR onprogress event.total У меня есть только значение Content-Length вместо значения размера файла. Помогите пожалуйста, я понятия не имею, как это исправить!

Answer 1

Вам не нужно получать информацию о прогрессе в бэкэнд, если вы хотите показать прогресс, вам нужно знать только то, что вы отправили с вашего интерфейса, в бэкэнд, чтобы вы могли рассчитать ход загрузки.

В вашем вебе-интерфейс .js или .html, попробуйте что-то вроде этого:

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

В бэкэнде вам нужна только простая конечная точка, как это:

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 также необходим и помнить , xhr работает только в современных браузерах.