免费商城网站建站系统,陕西企业网站建设哪家专业,网站制作系统,肇庆市公共资源交易中心成品效果图#xff1a; 解决问题#xff1a;上传文件过大时#xff0c;等待时间过长#xff0c;但是进度条却不会动#xff0c;只会在上传完成之后才会显示上传完成
上传文件的upload.component.html
nz-modal [(nzVisible)]isVisible [nzTitle]文…成品效果图 解决问题上传文件过大时等待时间过长但是进度条却不会动只会在上传完成之后才会显示上传完成
上传文件的upload.component.html
nz-modal [(nzVisible)]isVisible [nzTitle]文件上传 [nzWidth]1000px [nzFooter]modalFooter(nzOnCancel)onCancel() classadvice-upload-filediv nz-rownz-upload #uploadListData nzTypedrag [(nzFileList)]fileList [nzMultiple]isMultiple [nzLimit]0[nzBeforeUpload]beforeUploadp classant-upload-drag-iconi nz-icon nzTypeinbox/i/pp点击或拖拽上传/p/nz-uploaddiv stylepadding-top: 10pxh6文件上传进度:/h6nz-progress [nzPercent]percent/nz-progress/div/divng-template #modalFooterbutton nz-button nzTypedefault (click)cleanList()清空上传队列/buttonbutton nz-button nzTypedefault (click)onCancel()取消/buttonbutton nz-button nzTypeprimary (click)submit()上传/button/ng-template
/nz-modalupload.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): ObservableArrayany {return this.http.post(${this.URL} /uploadFile?fileName${fileName}categoryId${categoryId}, files);}
效果就是上传文件大时进度条一直是0%然后上传完成才100%会让用户误解没上传成功重复上传
效果图 解决方法如下
1、修改接口里面的传参post,鼠标移上去一般有显示类型参数 /** 上传文件 */uploadMultiFiles(files: FormData, categoryId: string, fileName: string): Observableany {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
