angular - 单击上传按钮时如何添加进度条？

Question

我在 Angular 8 应用程序上工作，我需要添加进度条

单击上传按钮时，进度条将在单击时起作用

按钮上传直到完成上传

上传服务

PostUpload(file)
{
  const formData: FormData = new FormData();
  formData.append('file', file,file.name);
 return this.http.post('http://localhost:61265/api/DeliverySys/', formData,{responseType: 'blob'});
}

组件上传.ts

public uploadFile = () => {
this._dataService.PostUpload(this.selectedoptions.toString(),this.fileToUpload)

 .subscribe((response: Blob) => saveAs(response, this.fileToUpload.name + '.xlsx'));
}

组件上传.html

<button (click)="uploadFile()"></button>
      

我尝试如下

    this._dataService.PostUpload(this.selectedoptions.toString(),this.fileToUpload)
 
 .subscribe((event:any) => {
  if (event.type === HttpEventType.Response) {
      console.log('Upload complete');
      this.message = 'Upload success.';
      this.onUploadFinished.emit(event.body);
  }
  if (event.type === HttpEventType.UploadProgress) {
      
         this.progress = Math.round(100 * event.loaded / event.total);
      console.log('Progress ' + this.progress + '%');
  }saveAs(event, this.fileToUpload.name + '.xlsx') 
}
);

<div class="col-md-4">
  <span class="upload">
    {{progress}}%
  </span>
  <span class="upload" >
    {{message}}
  </span>
</div>

但问题仍然存在对进度百分比没有影响或完成时没有给我上传成功你能帮我吗