<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 方法保存或打开文件，并将文件扩展名改为 .pdfwindow.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;}});}}
