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

Posted 2023-04-13

【中文标题】使用 Blazor 和 Aspnet Webapi 跟踪 HttpClient.PostAsync 进度

【英文标题】：Tracking HttpClient.PostAsync progress using Blazor and Aspnet Webapi

【发布时间】：2021-10-02 11:13:58

【问题描述】：

我目前正在使用 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的AddScope()的依赖注入注入的

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

请帮忙..

【问题讨论】：

您是要跟踪单个http请求的进度还是整体批量上传？

嗨@MayurEkbote，为了简单起见，我可以跟踪整个http请求，不需要跟踪每个文件...... :)

对一个文件发出一个http请求有限制吗？它还将使报告进度简单明了。

@MayurEkbote 没有限制，如果每个http请求一个文件也可以...请教我如何使用进度跟踪来做到这一点？

【参考方案1】：

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

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