使用 Blazor 和 As.net Webapi 跟踪 HttpClient.PostAsync 进度

Question

我目前正在使用 Blazor 和 Asp.Net WebApi Controller 来执行一些文件上传/下载。我有一个在 Blazor 客户端中调用的 UploadFiles() ，如下所示：

public async Task<bool> UploadFiles(Action<int> callback, IReadOnlyList<IBrowserFile> files, string subdir = "")
{
    if (files != null)
    {
        var content = new MultipartFormDataContent();
        foreach (var file in files)
        {
            var fileContent = new StreamContent(file.OpenReadStream(_allowedMaxFileSize));
            content.Add(fileContent, "\"files\"", file.Name);  
            hasItemsForUpload = true;
        }

        if (content != null)
        {
            var uri = $@"api/mycontroller/upload?subdir=" + subdir;
            var result = await _http.PostAsync(uri, content);

            if (result.IsSuccessStatusCode)
            {                       
                return true;
            }
        }
    }    

    return false;
}

有没有办法让我轻松跟踪 httpclient.postasync() % 进度，我可以在我的回调中将 % 作为 int 传递？ 注意这里的_http是通过注册为startup.cs的_http ()的依赖注入注入的

我见过使用自定义 http 内容的复杂示例，但我似乎无法理解它...:(

请帮忙..

Answer 1

FileComponent.razor

<div> Progress: @current </div>

@code
{
  int current = 0;
  
  void UpdateProgress()
  {
    current++;
    StateHasChanged();
  }
  void ResetBatch(){ current=0; }

  
  public async Task<bool> UploadFiles(Action<int> callback, IReadOnlyList<IBrowserFile> files, string subdir = "")
{
    ResetBatch();
    if (files != null)
    {
        var content = new MultipartFormDataContent();
        foreach (var file in files)
        {
            var fileContent = new StreamContent(file.OpenReadStream(_allowedMaxFileSize));
            content.Add(fileContent, "\"files\"", file.Name);  
            hasItemsForUpload = true;
        if (content != null)
        {
            var uri = $@"api/mycontroller/upload?subdir=" + subdir;
            var result = await _http.PostAsync(uri, content);
        
         }

         UpdateProgress();
        }
    }    
    ResetBatch();
    return true;
}
}

请注意，您可以创建一个完整的上传批次 class 而不是“当前”，其中包含有关要更新的文件总数、文件名、当前文件名、每个上传状态等的信息。