时间戳

首页 > 解决方案 > 使用 Blazor 和 Aspnet Webapi 跟踪 HttpClient.PostAsync 进度

c# - 使用 Blazor 和 Aspnet Webapi 跟踪 HttpClient.PostAsync 进度

问题描述

我目前正在使用 Blazor 和 Asp.Net WebApi 控制器来执行一些文件上传/下载。我在 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的AddScope()的依赖注入注入的

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

请帮忙..

标签： c#asp.net-web-apiprogress-barblazordotnet-httpclient

解决方案

文件组件.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;
}
}

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

推荐阅读