feat(imgUpload): 支持更全面的返回值, 支持 上传前自定义校验

Author: quanquan2100

src/components/base/upload-imgs/README.md

@@ -46,24 +46,24 @@ export default {
 
 ## props
 
-|      参数      |     类型      |  默认值  |            说明            |
-| :------------: | :-----------: | :------: | :------------------------: |
-|     value      |     Array     |    []    |         初始化数据         |
-|  auto-upload   |    Boolean    |   true   |   新增图片是是否自动上传   |
-|    disabled    |    Boolean    |  false   |          是否禁用          |
-|    preview     |    Boolean    |   true   |         是否可预览         |
-|    multiple    |    Boolean    |  false   |      是否可以一次多选      |
-|    min-num     |    Number     |    0     |        最少图片数量        |
-|    max-num     |    Number     |    0     | 最多图片数量, 0 表示无限制 |
-| before-upload  |   Function    |   null   |    上传前自定义校验函数    |
-|   remote-fuc   |   Function    |   null   |        重写远程方法        |
-|    sortable    |    Boolean    |  false   |         是否可排序         |
-|     accept     |    String     | image/\* |       运行上传的类型       |
-| animated-check |    Boolean    |  false   |   是否需要检测是否是动图   |
-|     rules      |    Object     |    {}    |          图像规则          |
-|      fit       |    String     | contain  |        图像显示形式        |
-|     width      | Nulber/String |   200    |            宽度            |
-|     height     | Number/String |   200    |            高度            |
+|      参数      |     类型      |  默认值  |                                            说明                                            |
+| :------------: | :-----------: | :------: | :----------------------------------------------------------------------------------------: |
+|     value      |     Array     |    []    |                                         初始化数据                                         |
+|  auto-upload   |    Boolean    |   true   |                                   新增图片是是否自动上传                                   |
+|    disabled    |    Boolean    |  false   |                                          是否禁用                                          |
+|    preview     |    Boolean    |   true   |                                         是否可预览                                         |
+|    multiple    |    Boolean    |  false   |                                      是否可以一次多选                                      |
+|    min-num     |    Number     |    0     |                                        最少图片数量                                        |
+|    max-num     |    Number     |    0     |                                 最多图片数量, 0 表示无限制                                 |
+| before-upload  |   Function    |   null   | 上传前自定义校验函数, 返回 true 表示校验成功, 否则校验失败不进行后续上传, 支持返回 Promise |
+|   remote-fuc   |   Function    |   null   |                               重写远程方法, 支持返回 Promise                               |
+|    sortable    |    Boolean    |  false   |                                         是否可排序                                         |
+|     accept     |    String     | image/\* |                                       运行上传的类型                                       |
+| animated-check |    Boolean    |  false   |                                   是否需要检测是否是动图                                   |
+|     rules      |    Object     |    {}    |                                          图像规则                                          |
+|      fit       |    String     | contain  |                                        图像显示形式                                        |
+|     width      | Nulber/String |   200    |                                            宽度                                            |
+|     height     | Number/String |   200    |                                            高度                                            |
 
 图像验证规则属性 rule 支持的验证规则有:
 

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

@@ -3,7 +3,6 @@
  Describe: 多图片上传组件, 附有预览, 排序, 验证等功能
 
 todo: 支持 before-upload
-todo: 图像验证支持验证是否是动图
 todo: 文档编写
 todo: jsDoc 编写
 todo: 文件判断使用 serveWorker 优化性能
@@ -98,7 +97,8 @@ import {
 } from './utils'
 
 /**
- * @typedef {Object<string, number, any>} LocalFileInfo 本地图像通过验证后构造的信息对象
+ * 本地图像通过验证后构造的信息对象
+ * @typedef {Object<string, number, any>} LocalFileInfo
  * @property {string} localSrc 本地图像预览地址
  * @property {File} file 本地图像文件
  * @property {number} width 宽
@@ -110,15 +110,17 @@ import {
  */
 
 /**
- * @typedef {Object<string, number, any>} PreviewItem 本地图像通过验证后构造的信息对象
- * @property {string} localSrc 本地图像预览地址
- * @property {File} file 本地图像文件
- * @property {number} width 宽
+ * 返回数据对象
+ * @typedef {Object<string, number>} ReturnItem
+ * @property {number|string} id 本地图像预览地址
+ * @property {number|string} imgId 宽
+ * @property {string} src 文件相对路径
+ * @property {string} display 文件完整路径
  * @property {number} height 高
- * @property {string} name 文件名
- * @property {number} size 文件大小
- * @property {string} type 文件的媒体类型 (MIME)
- * @property {Date} lastModified 文件最后修改时间
+ * @property {number} width 宽
+ * @property {string} fileName 文件名
+ * @property {string} fileType 文件的媒体类型 (MIME), 针对部分文件类型做了检测
+ * @property {boolean} isAnimated 是否是动态图, 如果不进行检测则为 null
  */
 
 const ONE_KB = 1024
@@ -285,12 +287,12 @@ export default {
     },
     /** 上传前插入方法, 属于高级用法 */
     beforeUpload: {
-      type: Promise,
+      type: Function,
       default: null,
     },
     /** 重写上传方法, 如果重写则覆盖组件内上传方法 */
     remoteFuc: {
-      type: [Function, Promise],
+      type: Function,
       default: null,
     },
     /** 图像显示模式 */
@@ -536,38 +538,70 @@ export default {
       }
       // eslint-disable-next-line
       item.loading = true
-      // 如果是用户自定义方法
-      // 出于简化 api 的考虑, 只允许单个文件上传
-      if (this.remoteFuc) {
-        // 回调函数模式
-        if (typeof this.remoteFuc === 'function') {
-          return new Promise((resolve) => {
-            const a = this.remoteFuc(item.file, (data) => {
-              reduceResult(item, data)
-              if (!data) {
-                this.$message.error('执行自定义上传出错')
-                resolve(false)
-              } else {
-                resolve(item)
-              }
-            })
+      if (this.beforeUpload && typeof this.beforeUpload === 'function') {
+        if (typeof this.beforeUpload === 'function') {
+          const result = await new Promise((resolve) => {
+            let a
+            try {
+              a = this.beforeUpload(item, (data) => {
+                if (!data) {
+                  resolve(false)
+                } else {
+                  resolve(true)
+                }
+              })
+            } catch (err) {
+              resolve(false)
+            }
             // promise 模式
             if (a != null && typeof a.then === 'function') {
               a.then((remoteData) => {
-                reduceResult(item, remoteData)
                 if (!remoteData) {
                   resolve(false)
                 }
-                resolve(item)
+                resolve(true)
               })
             }
           })
+          if (!result) {
+            reduceResult(item, false)
+            return false
+          }
         }
 
         // 除 promise 和 函数回调外其他形式都不支持
         this.$message.error('执行自定义上传出错, 检查远程方法是否是promise或者函数')
         return false
       }
+      // 如果是用户自定义方法
+      // 出于简化 api 的考虑, 只允许单个文件上传
+      if (this.remoteFuc && typeof this.remoteFuc === 'function') {
+        return new Promise((resolve) => {
+          const a = this.remoteFuc(item.file, (data) => {
+            reduceResult(item, data)
+            if (!data) {
+              this.$message.error('执行自定义上传出错')
+              resolve(false)
+            } else {
+              resolve(item)
+            }
+          })
+          // promise 模式
+          if (a != null && typeof a.then === 'function') {
+            a.then((remoteData) => {
+              reduceResult(item, remoteData)
+              if (!remoteData) {
+                resolve(false)
+              }
+              resolve(item)
+            })
+          }
+        })
+
+        // 除 promise 和 函数回调外其他形式都不支持
+        this.$message.error('执行自定义上传出错, 检查远程方法是否是promise或者函数')
+        return false
+      }
 
       // 使用内置上传
       return new Promise((resolve) => {
@@ -623,12 +657,24 @@ export default {
       }
 
       // 如无错误, 表示图像都以上传, 开始构造数据
-      const result = imgInfoList.map(item => ({
-        id: item.status === 'new' ? '' : item.id,
-        imgId: item.imgId,
-        src: item.src,
-        display: item.display,
-      }))
+      /**
+       * @type {array<ReturnItem>}
+       */
+      const result = imgInfoList.map((item) => {
+        /** @type {ReturnItem} */
+        const val = {
+          id: item.status === 'new' ? '' : item.id,
+          imgId: item.imgId,
+          src: item.src,
+          display: item.display,
+          width: item.width,
+          height: item.height,
+          fileName: item.name,
+          fileType: item.type,
+          isAnimated: item.isAnimated,
+        }
+        return val
+      })
       // 获取数据成功后发出
       this.$emit('upload', result)
       return result
@@ -850,7 +896,7 @@ export default {
             }
           }
         } else {
-          const empty = max - itemList.length + 1
+          const empty = max - itemList.length
           if (max && l > empty) {
             l = empty
           }
@@ -945,7 +991,7 @@ export default {
         image.src = localSrc
         image.onload = () => {
           /**
-           * @type LocalFileInfo
+           * @type {LocalFileInfo}
            */
           const localFileInfo = {
             localSrc,
@@ -958,7 +1004,6 @@ export default {
             lastModified: file.lastModified,
             isAnimated,
           }
-          console.log(localFileInfo)
           resolve(localFileInfo)
           image = null
         }

src/plugins/custom/views/Demo.vue

@@ -19,6 +19,12 @@
             <el-button @click="getValue('uploadEle4')">获取当前图像数据</el-button>
           </div>
         </el-form-item>
+        <el-form-item label="动图检测示例">
+          <upload-imgs ref="uploadEle32" :rules="rules" :multiple="true" :animated-check="true" />
+          <div>
+            <el-button @click="getValue('uploadEle32')">获取当前图像数据</el-button>
+          </div>
+        </el-form-item>
         <el-form-item label="禁用+初始化">
           <upload-imgs
             ref="uploadEle5"
@@ -132,6 +138,12 @@
             :fit="fit"
             :value="initData" />
         </el-form-item>
+        <el-form-item label="自定义校验函数">
+          <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>
     </div>
   </div>
@@ -214,6 +226,10 @@ export default {
   //   // next()
   // },
   methods: {
+    async beforeFuc() {
+      this.$message.error('进入自定义校验函数, 并返回false终止上传')
+      return false
+    },
     async getValue(name) {
       console.log(await this.$refs[name].getValue())
       // eslint-disable-next-line