成品效果图:
解决问题:上传文件过大时,等待时间过长,但是进度条却不会动,只会在上传完成之后才会显示上传完成
上传文件的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