下载文件时进度条不显示剩余百分比？

Posted 2023-03-13

【中文标题】下载文件时进度条不显示剩余百分比？

【英文标题】：progress bar not show remaining by percent when download file?

【发布时间】：2021-10-28 19:28:21

【问题描述】：

我在 Angular 8 上工作，我遇到问题进度条不显示 部分下载

假设我下载数据然后 20% 然后 40% 直到到达

到 100% 但进度条停止到 100% 而不显示

还有什么

我的尝试

this._dataService.PostUpload(this.selectedoptions.toString(),this.fileToUpload)
 .subscribe((event: HttpEvent<any>) => 
  switch (event.type) 
    
    case HttpEventType.UploadProgress:
      this.progress = Math.round(event.loaded / event.total * 100);
      console.log(`Uploaded! $this.progress%`);
      break;
    case HttpEventType.Response:
      console.log('Upload successfully created!', event.body);
    
      FileSaver.saveAs(event.body, this.fileToUpload.name + '.xlsx')
      setTimeout(() => 
        this.progress = 0;
      , 1500);

  
)

html组件

<div class="col-md-4">
  <span class="upload" *ngIf="progress > 0">
    progress%
  </span>
</div>

更新帖子

我看到`上传了！控制台进度

但我的问题仍然是 100% 停止并且没有变化

那么进步有什么好处

我进步了，知道还剩下什么

见下图

【问题讨论】：

您是否在控制台中看到"Uploaded! [progress]"？这会将其缩小到获取事件的问题或渲染问题......

【参考方案1】：

要报告进度事件，您必须在发出请求时将reportProgress option 设置为true。

【讨论】：

我将其设置为服务

您上传的文件有多大？如果它非常小，所有进度都会立即发生，因为整个文件是在一个数据包中发送的。

文件达到 100 kb

我的服务如下： PostUpload(selectedoptionsId, file):Observable const formData: FormData = new FormData(); formData.append('file', file,file.name); formData.append('selectedoptions',selectedoptionsId.toString()); return this.http.post(this.url + 'DeliverySys/Upload', formData,reportProgress: true,observe:'events', responseType: 'blob');

这是一个非常小的文件；转移或多或少会立即发生，中间没有进展报告。尝试使用 50MB 的文件，看看会发生什么？