XHRアップロード進捗expressjsのmulter

Question

を使用している間、私は、アップロードの進行状況を追跡するためにXHRを使用しようとしていますが、event.totalで私onprogressコールバックで私はレスポンスヘッダからの代わりに、ファイルサイズをアップロードするコンテンツ長を取得：

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

私は、ファイルのアップロードを処理するためにMulterを使用して、デフォルトでは、ファイルのアップロードを処理するためにavaibleではないようだ。 https://github.com/expressjs/multer/issues/243

だから私は進歩ストリームにアップロード取り扱いしてみました：

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

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

しかし、それは同じように動作します。ログとXHR onprogress event.totalのonle "Progress ..."だけを取得します。ファイルサイズの値ではなくContent-Length値しか持っていません。助けてください、私はそれをどのように修正するか分かりません！

Answer 1

進捗状況を表示したい場合は、バックエンドで進捗状況を取得する必要はありません。フロントエンドからバックエンドに送信した内容を知っているだけで、アップロードの進捗状況を計算できます。あなただけのこのような単純なエンドポイントで必要なバックエンドでは

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

：あなたのフロントエンドの.jsまたは.htmlで

、このような何かをしようと

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は最新のブラウザでのみ動作します。