调用nzBeforeUpload=false如何显示文件预览？

Question

如果调用nzBeforeUpload=false，如何显示文件预览？

<nz-upload [nzShowButton]="fileList.length == 0" nzListType="picture-card" [nzBeforeUpload]="beforeUpload" [(nzFileList)]="fileList">
      <div>
        <i nz-icon nzType="plus"></i>
        <div style="margin-top: 8px">Upload</div>
      </div>
</nz-upload>

如果返回 True，它会工作，但它会将文件 POST 到当前 url。

Answer 1

我刚刚做了：

<nz-upload [nzShowButton]="fileList.length == 0" [nzIconRender]="test" nzListType="picture-card" [nzBeforeUpload]="beforeUpload"
          [(nzFileList)]="fileList">
          <div>
            <i nz-icon nzType="plus"></i>
            <div>Upload</div>
          </div>
        </nz-upload>
        <ng-template #test><img width=100 height=100 [src]="preview"/></ng-template>

  beforeUpload = (file: NzUploadFile): boolean => {
    this.getBase64(file as any).then(x => this.preview=x?.toString() as any)
    this.fileList = this.fileList.concat(file);
    return false;
  }

  getBase64(file: File): Promise<string | ArrayBuffer | null> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }