feat(upload-imgs): 支持上传并获取数组件据方法

Author: quanquan2100

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

@@ -41,7 +41,7 @@
   <div class="imgs-upload-container" v-loading="loading">
     <template v-for="(item, i) in itemList">
       <template v-if="item.display">
-        <div class="thumb-item" :key="item.id" :style="boxStyle">
+        <div class="thumb-item" :key="item.id" :style="boxStyle" v-loading="item.loading">
           <el-image
             class="thumb-item-img"
             :src="item.display"
@@ -400,7 +400,75 @@ export default {
   },
   methods: {
     async getValue() {
-      // 获取需要上传
+      const { itemList, isStable, min } = this
+
+      // 检查是否有不符合要求的空项
+      const l = isStable ? itemList.length : (itemList.length - 1)
+      for (let i = 0; i < l; i += 1) {
+        if (itemList[i].status === 'input') {
+          this.$message.error('当前存在未选择图片, 请全部选择')
+          return false
+        }
+      }
+      if (l < min) {
+        this.$message.error(`至少选择${min}张图片`)
+        return false
+      }
+      // 提取需要上传文件
+      const asyncList = []
+      // 上传文件后获取对应key值
+      const getAsyncItem = (item) => {
+        if (!item.file) {
+          return Promise.resolve(item)
+        }
+        // eslint-disable-next-line
+        item.loading = true
+        return this.$axios({
+          method: 'post',
+          url: '/cms/file/',
+          data: {
+            file: item.file,
+          },
+        }).then((res) => {
+          if (!Array.isArray(res) || res.length !== 1) {
+            throw new Error('upload error')
+          }
+          // 释放内存
+          window.URL.revokeObjectURL(item.display)
+          // eslint-disable-next-line
+          item.display = res[0].url
+          // eslint-disable-next-line
+          item.src = res[0].key
+          // eslint-disable-next-line
+          item.file = null
+          // eslint-disable-next-line
+          item.loading = false
+          return item
+        }).catch((err) => {
+          // eslint-disable-next-line
+          item.loading = false
+          console.error(err)
+          this.$message.error('图像上传失败, 请重试')
+          return false
+        })
+      }
+      for (let i = 0; i < itemList.length; i += 1) {
+        // 跳过上传组件
+        if (itemList[i].status !== 'input') {
+          asyncList.push(getAsyncItem(itemList[i]))
+        }
+      }
+      const imgInfoList = await Promise.all(asyncList)
+      // 如果有失败的上传, 则返回错误
+      if (imgInfoList.some(item => !item)) {
+        return false
+      }
+      // 如无错误, 表示图像都以上传, 开始构造数据
+      return imgInfoList.map(item => ({
+        id: item.status === 'new' ? '' : item.id,
+        display: item.display,
+        src: item.src,
+      }))
     },
     /**
      * 删除某项

src/plugins/ImgsUpload/views/Demo.vue

@@ -3,13 +3,18 @@
     <div class="lin-title">插件ImgsUpload舞台页面</div>
     <el-divider></el-divider>
     <div class="lin-wrap">
-      <el-form label-width="180px">
-        <el-form-item label="带初始化">
+      <el-form label-width="220px">
+        <el-form-item label="带初始化至少4张, 至多5张">
           <upload-imgs
+            ref="uploadEle"
             :value="initData"
             :rules="rules"
             :multiple="true"
-            :max-num="5" />
+            :max-num="5"
+            :min-num="4" />
+            <div>
+              <el-button @click="getValue">获取数据</el-button>
+            </div>
         </el-form-item>
         <el-form-item label="普通示例">
           <upload-imgs :rules="rules" :multiple="true" />
@@ -37,6 +42,12 @@
         <el-form-item label="定制宽高-排序">
           <upload-imgs :rules="rules" :width="200" :height="150" :value="initData" :sortable="true" />
         </el-form-item>
+        <el-form-item label="重新初始化">
+          <upload-imgs :rules="rules" :width="200" :height="150" :value="initData1" :sortable="true" />
+          <div>
+            <el-button @click="changeData">重新初始化</el-button>
+          </div>
+        </el-form-item>
         <el-form-item label="图像缩略图展示模式">
           <upload-imgs :rules="rules" :width="200" :height="150" fit="cover" :value="initData" />
         </el-form-item>
@@ -64,6 +75,19 @@ export default {
         minWidth: 100,
         maxWidth: 2000,
       },
+      initData1: [{
+        id: '123',
+        display: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+        src: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+      }, {
+        id: '12d3',
+        display: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
+        src: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
+      }, {
+        id: 'hahah',
+        display: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
+        src: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
+      }],
       initData: [{
         id: '123',
         display: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
@@ -91,7 +115,22 @@ export default {
   //   // this.init()
   //   // next()
   // },
-  methods: {},
+  methods: {
+    async getValue() {
+      console.log(await this.$refs.uploadEle.getValue())
+    },
+    changeData() {
+      this.initData1 = [{
+        id: 'hahah',
+        display: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
+        src: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
+      }, {
+        id: '12d3',
+        display: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
+        src: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
+      }]
+    },
+  },
 }
 </script>