upload-imgs: 实现图片上传成功、失败的钩子函数

src/components/base/upload-imgs/index.vue

@@ -309,6 +309,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    /** 上传成功后的钩子 */
+    onSuccess: {
+      type: Function,
+      default: () => {},
+    },
+    /** 上传失败后的钩子 */
+    onError: {
+      type: Function,
+      default: () => {},
+    },
   },
   computed: {
     /** 每项容器样式 */
@@ -621,8 +631,10 @@ export default {
         this.originUpload(item, data => {
           reduceResult(item, data)
           if (!data) {
+            this.onError(item)
             resolve(false)
           } else {
+            this.onSuccess(item)
             resolve(item)
           }
         })
@@ -1013,7 +1025,11 @@ export default {
       // 检测是否是动图
       let isAnimated = null
       if (animatedCheck) {
-        isAnimated = await checkIsAnimated({ file, fileType, fileUrl: localSrc })
+        isAnimated = await checkIsAnimated({
+          file,
+          fileType,
+          fileUrl: localSrc,
+        })
       }
       return new Promise((resolve, reject) => {
         let image = new Image()

src/plugins/custom/views/Demo.vue

@@ -78,6 +78,9 @@
           <upload-imgs ref="uploadEle33" :rules="rules" :before-upload="beforeFuc" :multiple="true" />
           <div><el-button @click="getValue('uploadEle33')">获取当前图像数据</el-button></div>
         </el-form-item>
+        <el-form-item label="上传成功、失败钩子函数">
+          <upload-imgs :multiple="true" :on-success="handleSuccess" :on-error="handleError" />
+        </el-form-item>
       </el-form>
     </div>
   </div>
@@ -224,6 +227,14 @@ export default {
         })
       }, 3000)
     },
+    handleSuccess(item) {
+      console.log('on-success', item)
+      this.$message.info('上传完成')
+    },
+    handleError(item) {
+      console.log('on-error', item)
+      this.$message.info('上传失败')
+    },
   },
 }
 </script>