成品效果图：

解决问题：上传文件过大时，等待时间过长，但是进度条却不会动，只会在上传完成之后才会显示上传完成

上传文件的upload.component.html

<nz-modal [(nzVisible)]="isVisible" [nzTitle]="'文件上传'" [nzWidth]="'1000px'" [nzFooter]="modalFooter"
  (nzOnCancel)="onCancel()" class="advice-upload-file">

  <div nz-row>
    <nz-upload #uploadListData nzType="drag" [(nzFileList)]="fileList" [nzMultiple]="isMultiple" [nzLimit]="0"
      [nzBeforeUpload]="beforeUpload">
      <p class="ant-upload-drag-icon">
        <i nz-icon nzType="inbox"></i>
      </p>
      <p>
        点击或拖拽上传
      </p>
    </nz-upload>
    <div style="padding-top: 10px">
      <h6>文件上传进度:</h6>
      <nz-progress [nzPercent]="percent">
      </nz-progress>
    </div>
  </div>

  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="cleanList()">清空上传队列</button>
    <button nz-button nzType="default" (click)="onCancel()">取消</button>
    <button nz-button nzType="primary" (click)="submit()">上传</button>
  </ng-template>
</nz-modal>

upload.component.ts

  /** 是否允许上传多个文件 */
  isMultiple = true;
  /**
   * 文件赋值列表
   */
  fileList = [];
  /**
   * 上传进度条
   */
  percent = null;

 /** 上传 */
  submit() {
    let successCount = 0;
    this.fileList.forEach(file => {
      const formData: FormData = new FormData();
      formData.append('file', file.originFileObj, file.name);
      this.uploadService.uploadMultiFiles(formData, this.categoryId, file.name).subscribe(data => {
        if (data) {
          successCount++;
          this.msg.create('success', data['fileName'] + `上传成功！`);
          this.percent = Number((successCount / this.fileList.length * 100).toFixed(2));
        }
        if (this.fileList.length === successCount) {
          setTimeout(() => {
            this.onCancel();
            this.notification.emit({
              operation: null,
              data: null
            });
          }, 1000);
        }
      });
    });
  }

  cleanList() {
    this.fileList = [];
  }

  beforeUpload = (file: UploadFile) => {
    // const isLt200M = file.size / 1024 / 1024 < 200;
    // if (!isLt200M) {
    //   this.msg.error('文件大小不超过200MB!');
    //   return false;
    // }
    return true;
  }

接口：

  /** 上传文件 */
  uploadMultiFiles(files: FormData, categoryId: string, fileName: string): Observable<Array<any>> {
    return this.http.post(`${this.URL}` + `/uploadFile?fileName=${fileName}&categoryId=${categoryId}`, files);
  }

效果就是上传文件大时进度条一直是0%，然后上传完成才100%（会让用户误解没上传成功重复上传）

效果图：

解决方法如下：

1、修改接口里面的传参post,鼠标移上去一般有显示类型参数

  /** 上传文件 */
  uploadMultiFiles(files: FormData, categoryId: string, fileName: string): Observable<any> {
    return this.http.post(`${this.URL}` + `/uploadFile?fileName=${fileName}&categoryId=${categoryId}`, files, {}, {
      reportProgress: true,
      observe: 'events',
    });
  }

2、修改upload.component.ts 文件的提交方法

  /** 上传 */
  submit() {
    this.fileList.forEach(file => {
      const formData: FormData = new FormData();
      formData.append('file', file.originFileObj, file.name);
      this.uploadService.uploadMultiFiles(formData, this.categoryId, file.name).subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percent = Math.round(100 * event.loaded / event.total);
        } else if (event.type === HttpEventType.Response) {
          // 文件上传成功
          this.msg.create('success', event.body['fileName'] + `上传成功！`);
          setTimeout(() => {
            this.onCancel();
            this.notification.emit({
              operation: null,
              data: null
            });
          }, 1000);
        }
      });
    });
  }

效果图：进度值会随着上传多少变化

参考文章：

angular:

https://www.yisu.com/jc/843309.html

axios:

https://www.jianshu.com/p/9564b549d2d6