ウェブサイトに進行状況バーを実装しようとしています。
問題:
ProgressEvent.loadは、進行状況がアップロードの実際の状態を示すのを妨げるProgressEvent.Totalと常に同じです。最初の 1 秒で xhr リクエストが送信され、終了したように見えますが、実際にはサーバーはまだファイルの一部を取得しています。
JS:
私の js コード (進行状況の一部) は次のようになります。
xhr.upload.onprogress = function (event) {
var progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
that._onProgressItem(item, progress);
};
プロパティlengthComputableは true です。event.loadedは 4354707 で、
event.totalは4354707 です。
C# サーバー側:
public async Task<FileResultViewModel> Upload(string type)
{
string ServerUploadFoler = "...";
// Verify that this is an HTML Form file upload request
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.UnsupportedMediaType));
}
// Create a stream provider for setting up output streams
var streamProvider = new MultipartFormDataStreamProvider(ServerUploadFolder);
// Read the MIME multipart asynchronously content using the stream provider we just created.
await Request.Content.ReadAsMultipartAsync(streamProvider);
string guid = String.Empty;
if (serverUploadMoveFolder != ServerUploadFolder)
{
foreach (MultipartFileData fileData in streamProvider.FileData)
{
guid = Guid.NewGuid().ToString();
string newFileName = serverUploadMoveFolder + guid + GetExtension(uploadType);
FileInfo fi = new FileInfo(fileData.LocalFileName);
fi.MoveTo(newFileName);
}
}
// Create response
return new FileResultViewModel
{
FileName = guid
};
}
4.2MB のファイルをアップロードしてから 1 秒後の Chrome デバッグ:
リクエストが完了した後のフィドラー:
私の質問は次のとおりです。
- ブラウザーはロードされたサイズをどのように認識しますか? どのようにファイルをパーツに分割し、どのパラメーターに基づいていますか?
- xhr.upload.onprogress 関数イベントはどのように進行状況で更新されますか? 彼の進捗状況を報告するのはサーバーですか。そうである場合、私はそれを処理しなかったため、コードのどこにありますか。
- ロードされたプロパティにパーツの実際のサイズが表示されないのはなぜですか?