处理文件上传和进度条的显示（进度条随文件上传进度值变化）

成品效果图：

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

上传文件的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