上传组件新增删除功能

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

@@ -1,16 +1,18 @@
 <div [style.width]="width ? width + 'px' : '100%'">
   <nz-upload
-  nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-  [nzHeaders]="{ authorization: 'authorization-text' }"
-  (nzChange)="handleChange($event)"
-  [nzFileList]="fileList"
-  [nzAccept]="accept"
-  [nzPreview]="preview"
->
-  <div style="color: #3e49b3;cursor: pointer;">
-    <span nz-icon nzType="upload"></span>{{title}}
-  </div>
-
-</nz-upload>
-
+    nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+    [nzHeaders]="{ authorization: 'authorization-text' }"
+    (nzChange)="handleChange($event)"
+    [nzFileList]="fileList"
+    [nzAccept]="accept"
+    [nzPreview]="preview"
+    [nzLimit]="1"
+    [nzSize]="size"
+    [nzDisabled]="disabled"
+    [nzRemove]="onRemove"
+  >
+    <div style="color: #3e49b3; cursor: pointer">
+      <span nz-icon nzType="upload"></span>{{ title }}
+    </div>
+  </nz-upload>
 </div>

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

@@ -21,6 +21,8 @@ export class CompUploadComponent implements OnInit {
   @Input('width') width: number = 0;
   @Input('maxlenght') maxlenght: number = 1; //文件数量限制
   @Input('type') type: string = 'file';
+  @Input('size') size: number = 2048; //上传文件限制大小单位KB
+
   get accept() {
     let type;
     switch (this.type) {
@@ -50,7 +52,12 @@ export class CompUploadComponent implements OnInit {
     //   url: 'http://www.baidu.com/xxx.png'
     // },
   ];
+  ossFileList: any;
+  Previewfilelist: any;
   ossProvider: { upload: any } | undefined;
+
+  disabled:boolean = false
+
   constructor(
     private msg: NzMessageService,
     private nzImageService: NzImageService
@@ -69,40 +76,43 @@ export class CompUploadComponent implements OnInit {
     });
     this.Previewfilelist = this.fileList;
   }
-  ossFileList: any;
-  Previewfilelist: any;
   async handleChange(info: NzUploadChangeParam) {
     console.log(info);
-    let fileList = [...info.fileList];
-    fileList = fileList.slice(-this.maxlenght);
-    fileList = fileList.map((file) => {
-      if (file.response) {
-        file.url = file.response.url;
-      }
-      return file;
-    });
-    this.fileList = fileList;
-
+    if(info.type == 'removed'){
+      return
+    }
+    this.disabled = true
     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) => {
-          // console.log(item);
-          let f = {
-            name: item.locaname,
-            url: item?.url,
-          };
-          return f;
-        })
-      );
+      let nowUploadFiles = ossFileList?.map((item) => {
+        let f = {
+          name: item.locaname,
+          url: item?.url,
+        };
+        return f;
+      })
+      
+      let fileList = [...this.fileList, ...nowUploadFiles];
+      this.fileList = fileList.slice(-this.maxlenght);
+      // fileList = fileList.map((file) => {
+      //   if (file.response) {
+      //     file.url = file.response.url;
+      //   }
+      //   return file;
+      // });
+      // this.fileList = fileList
+
+      this.Previewfilelist = [...this.fileList];
+      // this.ossFileList = ossFileList;
+
+      this.change.emit(this.fileList);
+      this.disabled = false
     }
     if (info.file.status === 'done') {
-      // this.msg.success(`${info.file.name} file uploaded successfully`);
-      // console.log(info);
+      this.msg.success(`${info.file.name} file uploaded successfully`);
+      console.log(info);
     } else if (info.file.status === 'error') {
       // this.msg.error(`${info.file.name} file upload failed.`);
     }
@@ -126,12 +136,19 @@ export class CompUploadComponent implements OnInit {
     }
     return ossFileList;
   }
+  onRemove = (e: any):boolean =>{
+    console.log(e);
+    let i =  this.fileList.findIndex((item:any)=> item.url == e?.url)
+    this.fileList.splice(i,1)
+    this.change.emit(this.fileList);
+    return false
+  }
   /**预览图片 */
   preview = async (e: any): Promise<void> => {
     let index = this.Previewfilelist.findIndex(
       (item: any) => item.uid == e.uid
     );
-    let file = this.ossFileList[index].url;
+    let file = this.Previewfilelist[index]?.url;
     if (!/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(file)) {
       window.open(file);
     } else {