nz-upload 手动上传 PDF预览

<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload" >
   <button nz-button>
       <i nz-icon nzType="upload"></i>
       上传材料
   </button>
</nz-upload>



  /**编辑的对象 */
  editingItem: ReportMaterialDTO = Object.create(null);
  /**上传的文件 */
  fileList: NzUploadFile[] = [];
  /**支持上传文件的后缀 */
  fileSuffix = ['.pptx', '.pdf', '.doc', '.docx'];

手动上传

  /**手动上传 */
  beforeUpload = (file: NzUploadFile): boolean => {
    if (!this.fileSuffix.some(value => file.name.endsWith(value))) {
      this.message.error('上传仅支持ppt、word、pdf格式材料！');
      return false;
    }
    this.fileList = [file];
    return false;
  };

预览、修改

  /**预览 */
  toPreview(item: ReportMaterialDTO) {
    this.systemFile.previewFile(item.materialFile?.id!).subscribe(data => {
      // this.progress.endPercent();
      setTimeout(() => {
        console.log('data',data)
        this.preview(data, item.materialFile?.originalName!);
      }, 800);
    });
  }

  preview(data: HttpResponse<Blob>, name: string) {
    if ('msSaveOrOpenBlob' in window.navigator) {
      // 如果浏览器是旧版的 Internet Explorer（IE），使用 msSaveOrOpenBlob 方法保存或打开文件，并将文件扩展名改为 .pdf
      window.navigator.msSaveOrOpenBlob(data.body, name.slice(0, name.lastIndexOf('.')) + '.pdf');
    } else {
      const extention = name.substring(name.lastIndexOf('.'));
      if (extention === '.jpg' || extention === '.jpeg' || extention === '.png' || extention === '.bmp' || extention === '.gif') {
        // 检查文件扩展名是否为常见的图片格式（如 .jpg, .jpeg, .png, .bmp, .gif）。
        // 如果是图片文件，使用 modalService.info 打开一个模态框，显示图片预览。
        this.modalService.info({
          nzTitle: name,
          nzClassName: 'modal-lg',
          nzBodyStyle: { margin: '0 auto' },
          nzContent: '<img class="modal-img-preview" src="' + data.url + '"/>',
          nzOkText: '关闭'
        });
      } else {
        // 处理其他文件类型（如 PDF 等
        const pdfSrc = window.URL.createObjectURL(data.body!);
        window.open(pdfSrc);
      }
    }
  }

  /**编辑 */
  editData(item: ReportMaterialDTO) {
    this.editingItem = item;
    this.isVisible = true;
    if (item.materialFile) {
      let file: any = { ...item.materialFile };
      file.name = item.materialFile?.originalName;
      this.fileList = [file];
    }
  }

// 异步方法，模拟数据获取
  async uploadFile(formData: FormData): Promise<SystemFileDTO> {
    return new Promise((resolve, reject) => {
      /**先上传材料 再新增 */
      this.systemFile.uploadSingleFile(formData, encodeURIComponent('汇报材料')).subscribe({
        next: file => {
          resolve(file);
        },
        error: (err: any) => {
          reject(err);
        },
        complete: () => {}
      });
    });
  }

  /**弹框确认事件 */
  async handleOk() {
    if (!FormUtil.validateForm(this.materialForm?.form)) {
      return;
    }
    if (this.fileList.length == 0) {
      this.message.warning('请上传材料！');
      return;
    }

    this.isOkLoading = true;
    //有原始名称就代表不是上传的，而是编辑时回显的
    if (!this.fileList[0].originalName) {
      console.log('fileList',this.fileList);
      
      const formData: FormData = new FormData();
      const file: any = this.fileList[0];
      formData.append('file', file, file.name);
      console.log('formData',formData)
      this.editingItem.materialFile = await this.uploadFile(formData);
    }
    if (this.editingItem.id) {
      /**修改 */
      this.service.update(this.editingItem.id, this.editingItem).subscribe({
        next: res => {
          this.loadTableData();
        },
        complete: () => {
          this.isVisible = false;
          this.isOkLoading = false;
        }
      });
    } else {
      /**新增 */
      this.service.create(this.editingItem).subscribe({
        next: res => {
          this.loadTableData();
        },
        complete: () => {
          this.isVisible = false;
          this.isOkLoading = false;
        }
      });
    }
  }