updata:compUpload

projects/textbook/src/app/comp-upload/comp-upload.component.html

@@ -4,8 +4,10 @@
   (nzChange)="handleChange($event)"
   [nzFileList]="fileList"
   [nzAccept]="'file'"
+  [nzPreview]="preview"
 >
   <div style="color: #3e49b3;cursor: pointer;">
     <span nz-icon nzType="upload"></span>{{title}}
   </div>
+
 </nz-upload>

projects/textbook/src/app/comp-upload/comp-upload.component.ts

@@ -4,11 +4,14 @@ import { CommonCompModule } from '../../services/common.modules';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzUploadChangeParam, NzUploadFile } from 'ng-zorro-antd/upload';
 import { ProvierOssAli } from './provider-oss-aliyun';
+import { NzImageService } from 'ng-zorro-antd/image';
+import { NzImageModule } from 'ng-zorro-antd/image';
+
 
 @Component({
   selector: 'app-comp-upload',
   standalone: true,
-  imports: [NzUploadModule, CommonCompModule],
+  imports: [NzUploadModule, CommonCompModule,NzImageModule],
   templateUrl: './comp-upload.component.html',
   styleUrls: ['./comp-upload.component.scss'],
 })
@@ -27,7 +30,7 @@ export class CompUploadComponent implements OnInit {
     // },
   ];
   ossProvider:{upload:any}|undefined
-  constructor(private msg: NzMessageService) {
+  constructor(private msg: NzMessageService,private nzImageService: NzImageService) {
     this.ossProvider = new ProvierOssAli()
   }
 
@@ -38,12 +41,16 @@ export class CompUploadComponent implements OnInit {
       }
     })
   }
+  ossFileList:any
+  Previewfilelist:any
   async handleChange(info: NzUploadChangeParam) {
     console.log(info);
     if (info.file.status !== 'uploading') {
       // 选择文件后，自动开始上传
       console.log(info.file, info.fileList);
+      this.Previewfilelist = info.fileList
       let ossFileList = await this.uploadAllFileList(info?.fileList)
+      this.ossFileList = ossFileList
       this.change.emit(ossFileList?.map(item=>item?.url))
     }
     if (info.file.status === 'done') {
@@ -53,6 +60,7 @@ export class CompUploadComponent implements OnInit {
     }
 
     // this.change.emit(info.fileList)
+    
   }
 
   async uploadAllFileList(fileList:Array<NzUploadFile>){
@@ -69,7 +77,13 @@ export class CompUploadComponent implements OnInit {
         }
       }
     }
-    console.log(ossFileList)
     return ossFileList
   }
+  /**预览图片 */
+  preview=async (e:any): Promise<void> => {
+    let index = this.Previewfilelist.findIndex((item:any)=>item.uid==e.uid)
+    this.nzImageService.preview([{src:this.ossFileList[index].url}], { nzZoom: 1, nzRotate: 0 });
+  };
+
+
 }