bug: #5 设置 multiple 为 false，删除文件报错

Author: dream2023

README.md

@@ -161,6 +161,14 @@ export default {
   },
 ```
 
+## 事件
+
+| 事件名称 | 说明               | 回调参数         |
+| -------- | ------------------ | ---------------- |
+| remove   | 当文件被删除时触发 | (file, fileList) |
+| success  | 文件上传成功时触发 | (file, fileList) |
+| error    | 上传失败时触发     | (error)          |
+
 ## 相关链接
 
 - [element-ui upload 组件](https://element.eleme.cn/#/zh-CN/component/upload)

example/App.vue

@@ -7,11 +7,13 @@
       :isCanDelete="true"
       :isCanDownload="true"
       :isCanUploadSame="true"
+      :isShowDeleteConfim="false"
       :isShowSize="true"
       :isShowTip="true"
-      :limit="6"
+      :limit="3"
       :multiple="true"
       :responseFn="handleResponse"
+      @remove="handleRemove"
       action="https://jsonplaceholder.typicode.com/posts/"
       placeholder="上传附件"
       v-model="file"
@@ -20,12 +22,16 @@
 </template>
 <script>
 export default {
-  data() {
+  data () {
     return {
-      file: []
+      file: { name: 'test.jpg', url: 'https://www.baidu.com' }
     }
   },
   methods: {
+    handleRemove (file, fileList) {
+      // eslint-disable-next-line no-console
+      console.log(file, fileList)
+    },
     handleResponse (response, file) {
       return {
         url: URL.createObjectURL(file.raw),

lib/EleUploadFile.vue

@@ -6,11 +6,12 @@
       :before-upload="handleBeforeUpload"
       :data="data"
       :drag="false"
-      :file-list="list"
+      :file-list="fileList"
       :headers="headers"
       :limit="limit"
       :multiple="multiple"
       :name="name"
+      :on-change="handleChange"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
       :on-success="handleUploadSuccess"
@@ -50,6 +51,7 @@
       :files="list"
       :isCanDelete="isCanDelete"
       :isCanDownload="isCanDownload"
+      :isShowDeleteConfim="isShowDeleteConfim"
       :isShowSize="isShowSize"
       @remove="handleRemove"
     />
@@ -97,6 +99,11 @@ export default {
       type: Boolean,
       default: true
     },
+    // 是否显示删除确认弹窗
+    isShowDeleteConfim: {
+      type: Boolean,
+      default: true
+    },
     // 是否可上传相同文件
     isCanUploadSame: {
       type: Boolean,
@@ -138,6 +145,11 @@ export default {
     // 同 element-ui upload 组件
     limit: Number
   },
+  data () {
+    return {
+      fileList: []
+    }
+  },
   computed: {
     // 按钮文本
     btnText () {
@@ -152,7 +164,7 @@ export default {
       }
     },
     // 是否显示提示
-    showTip() {
+    showTip () {
       return this.isShowTip && (this.fileType || this.fileSize)
     },
     // 列表
@@ -166,7 +178,7 @@ export default {
           if (typeof item === 'string') {
             item = { name: item, url: item }
           }
-          item.uid = item.uid || new Date() + temp++
+          item.uid = item.uid || new Date().getTime() + temp++
           return item
         })
       } else {
@@ -175,6 +187,10 @@ export default {
     }
   },
   methods: {
+    // 文件改变
+    handleChange (file, fileList) {
+      this.fileList = fileList
+    },
     // 上传前校检格式和大小
     handleBeforeUpload (file) {
       // 校检文件类型
@@ -234,17 +250,25 @@ export default {
       } else {
         this.$emit('input', response)
       }
+
+      // 上传成功
+      this.$emit('success', response, this.list)
     },
     // 删除
-    handleRemove(index) {
+    handleRemove (index) {
+      this.$emit('remove', this.list[index], this.list)
+      this.fileList.splice(index, 1)
       if (this.multiple) {
         const data = [...this.list]
         data.splice(index, 1)
         this.$emit('input', data || [])
       } else {
-        this.$emit('input', {})
+        this.$emit('input', null)
       }
     }
+  },
+  created () {
+    this.fileList = this.list
   }
 }
 </script>
@@ -253,4 +277,4 @@ export default {
 .ele-upload-file-uploader {
   margin-bottom: 5px;
 }
-</style>
+</style>

lib/EleUploadList.vue

@@ -51,10 +51,15 @@ export default {
     // 文件列表
     files: {
       type: Array,
-      default() {
+      default () {
         return [];
       }
     },
+    // 是否显示删除确认弹窗
+    isShowDeleteConfim: {
+      type: Boolean,
+      default: true
+    },
     // 是否禁用
     disabled: {
       type: Boolean,
@@ -91,7 +96,7 @@ export default {
       return size && !isNaN(Number(size)) ? prettyBytes(size) : ''
     },
     // 上传进度
-    parsePercentage(val) {
+    parsePercentage (val) {
       return parseInt(val, 10)
     },
     // 下载文件
@@ -101,10 +106,14 @@ export default {
       }
     },
     // 删除文件
-    handleDelete(index, file) {
-      this.$confirm('确认删除该文件吗? ').then(() => {
+    handleDelete (index, file) {
+      if (this.isShowDeleteConfim) {
+        this.$confirm('确认删除该文件吗? ').then(() => {
+          this.$emit('remove', index, file)
+        }).catch(() => { })
+      } else {
         this.$emit('remove', index, file)
-      }).catch(() => {})
+      }
     }
   }
 }
@@ -136,4 +145,4 @@ export default {
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }
-</style>
+</style>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-ele-upload-file",
   "description": "对 element-ui upload 组件进一步封装, 使其更简单、易用",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": false,
   "license": "MIT",
   "scripts": {