nzBeforeUpload返回 false 后，使用手动上传按钮替换上传按钮。
ponent.html
<nz-uploadclass="import-excel"[(nzFileList)]="fileList"[nzBeforeUpload]="beforeUpload"*ngIf="fileList.length == 0"><button nz-button>Import From Excel</button></nz-upload><buttonnz-buttonclass="import-excel"[nzType]="'primary'"[nzLoading]="uploading"(click)="handleUpload()" *ngIf="fileList.length > 0">{{ uploading ? 'Uploading' : 'Start Upload' }}</button>
ponent.ts
import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http'; // 载入必要模块import { NzMessageService, UploadFile } from 'ng-zorro-antd';import { filter } from 'rxjs/operators';···export class XXXComponent implements OnInit, OnChanges {constructor(private message: NzMessageService,private http: HttpClient, // 注册) { }···uploading = false; // 初始值fileList: UploadFile[] = [];···beforeUpload = (file: UploadFile): boolean => {this.fileList = this.fileList.concat(file); // 将上传内容存入fileListif (file.type !== 'image/png') { // 检查格式this.message.error(`Sorry, The file format is incorrect and only supports PNG format.`);this.uploading = false;this.fileList = [];}return false; // 手动上传的关键}handleUpload(): void { // 手动上传const formData = new FormData();this.fileList.forEach((file: any) => {formData.append('files[]', file);});this.uploading = true; // 修改上传按钮状态const req = new HttpRequest('POST', '/posts/', formData, { });this.http.request(req).pipe(filter(e => e instanceof HttpResponse)).subscribe(() => {this.uploading = false;this.fileList = [];this.message.success('upload successfully.');this.ngOnInit(); // 上传成功后，可根据需要重新渲染页面},() => {this.uploading = false;this.fileList = [];this.message.error('upload failed.');});}
