3

ウェブサイトに進行状況バーを実装しようとしています。

問題:
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.total4354707 です。 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 デバッグ: ここに画像の説明を入力


リクエストが完了した後のフィドラー: ここに画像の説明を入力

私の質問は次のとおりです。

  1. ブラウザーはロードされたサイズをどのように認識しますか? どのようにファイルをパーツに分割し、どのパラメーターに基づいていますか?
  2. xhr.upload.onprogress 関数イベントはどのように進行状況で更新されますか? 彼の進捗状況を報告するのはサーバーですか。そうである場合、私はそれを処理しなかったため、コードのどこにありますか。
  3. ロードされたプロパティにパーツの実際のサイズが表示されないのはなぜですか?
4

0 に答える 0