From 213de4c1ab7b27938a53c89b3ae3d128f821d859 Mon Sep 17 00:00:00 2001
From: Zhanglinling <zhanglinling0926@gmail.com>
Date: Sun, 16 Jun 2019 18:45:28 +0800
Subject: [PATCH 1/8] =?UTF-8?q?feat(upload-imgs):=20=E5=A4=9A=E5=9B=BE?=
 =?UTF-8?q?=E5=83=8F=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/upload-imgs/index.vue | 772 ++++++++++++++++++++++
 1 file changed, 772 insertions(+)
 create mode 100644 src/components/base/upload-imgs/index.vue

diff --git a/src/components/base/upload-imgs/index.vue b/src/components/base/upload-imgs/index.vue
new file mode 100644
index 00000000..bd544a4d
--- /dev/null
+++ b/src/components/base/upload-imgs/index.vue
@@ -0,0 +1,772 @@
+<!--
+ Component: UploadPicture
+ Describe: 图像预览上传加排序组件
+ Attribute:
+ - sortable {Boolean} false 是否可排序
+ - preview {Boolean} true 是否可预览
+ - multiple {Boolean} false 是否可以一次多选
+ - minNum {Number} 0 最少图片数量
+ - maxNum {Number} 0 最多图片数量, 0 表示无限制
+ - before-upload {Function} null 上传前自定义校验函数
+ - remoteFuc {Function} null 重写远程方法
+ - accept {String} image/* 运行上传的类型
+ - rules {Object} {} 图像规则
+ - value {Array} [] 初始化数据
+ - fit {String} contain 图像显示形式
+ - autoUpload {Boolean} true 新增图片是是否自动上传
+ - disabled {Boolean} false 是否禁用
+ - width {Nulber|String} 200 宽度
+ - height {Number|String} 200 高度
+ - clearable {Boolean} true 是否可清空
+
+ Method
+ - upload-begin 开始上传
+ - upload-abort 终止上传
+ - upload-success 上传成功
+ - upload-error 上传失败
+ - upload-finish 上传结束
+
+{
+  ratio: <Array> 比例 [宽，高] 也可传 [宽, 高, 缩放比例], 当仅有宽高比限制时, 用于计算展示宽高. 若不传第三个数则当做1
+  width: <Number> 宽度必需等于
+  height: <Number> 高度必需等于
+  minWidth: <Number> 最小宽
+  minHeight: <Number> 最小高
+  minSize: <Number> 最小size（Mb）
+  maxSize: <Number> 最大size（Mb）
+}
+-->
+
+<template>
+  <div class="imgs-upload-container">
+    <template v-for="(item, i) in itemList">
+      <template v-if="item.display">
+        <div class="thumb-item" :key="item.id" :style="boxStyle">
+          <el-image
+            class="thumb-item-img"
+            :src="item.display"
+            :fit="fit"
+            style="width: 100%; height: 100%;"></el-image>
+          <div class="control">
+            <i class="el-icon-close del" @click.prevent.stop="close(index)" title="删除"></i>
+            <div class="preview" title="更换图片" @click.prevent.stop="handleClick(item.id)">
+              <i class="el-icon-edit"></i>
+            </div>
+            <div class="control-bottom">
+              <i
+                title="前移"
+                class="control-bottom-btn el-icon-back"
+                :class="{disabled: (i === 0)}"
+                @click.stop="move(item.id, -1)"></i>
+              <i class="control-bottom-btn el-icon-view" title="预览"></i>
+              <i
+                title="后移"
+                class="control-bottom-btn el-icon-right"
+                :class="{disabled: (i === (itemList.length - 1))}"
+                @click.stop="move(item.id, 1)"></i>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div
+          class="upload-item"
+          :class="{'disabled': disabled}"
+          :key="item.id"
+          :style="boxStyle"
+          @click="handleClick(item.id)"
+          @keydown="handleKeydown($event, item.id)">
+          <i class="el-icon-plus" style="font-size: 3em;"></i>
+          <div v-html="rulesTip.join('<br>')" style="margin-top: 1em;"></div>
+        </div>
+      </template>
+    </template>
+    <input
+      class="item__input"
+      type="file"
+      ref="input"
+      @change="handleChange"
+      :multiple="!isStable && multiple"
+      :accept="accept" />
+  </div>
+</template>
+
+<script>
+const ONE_KB = 1024
+const ONE_MB = ONE_KB * 1024
+
+/** 生成随机字符串 */
+function createId() {
+  return Math.random().toString(36).substring(2)
+}
+
+/**
+ * 创建项, 如不传入参数则创建空项
+ * @returns {Item}
+ */
+function createItem(data = null) {
+  const item = {
+    loading: false,
+    id: createId(),
+    status: 'input', // new/edit/del/init/input
+    display: '',
+    src: '',
+    imgInfo: null,
+  }
+  if (!data) {
+    return item
+  }
+  if (data.id) {
+    return data
+  }
+
+  // 新传入图片信息
+  if (data.localSrc) {
+    item.id = data.id || item.id
+    item.src = data.src || item.src
+    item.display = data.localSrc || item.display
+    item.status = 'new'
+  } else {
+    item.id = data.id || item.id
+    item.src = data.src || item.src
+    item.display = data.display || item.display
+    item.status = 'init'
+  }
+
+  return item
+}
+
+/**
+ * 获取范围类型限制的提示文本
+ * @param {String} prx 提示前缀
+ * @param {Number} min 范围下限
+ * @param {Number} max 范围上限
+ * @param {String} unit 单位
+ */
+function getRangeTip(prx, min, max, unit = '') {
+  let str = prx
+  if (min && max) { // 有范围限制
+    str += ` ${min}${unit}~${max}${unit}`
+  } else if (min) { // 只有最小范围
+    str += ` ≥ ${min}${unit}`
+  } else if (max) { // 只有最大范围
+    str += ` ≤ ${max}${unit}`
+  } else { // 无限制
+    str += '无限制'
+  }
+  return str
+}
+
+export default {
+  name: 'UploadPicture',
+  data() {
+    return {
+      itemList: [],
+      loading: false,
+      currentId: '', // 正在操作项的id
+    }
+  },
+  props: {
+    /** 每一项宽度 */
+    width: {
+      type: [Number, String],
+      default: 160,
+    },
+    /** 每一项高度 */
+    height: {
+      type: [Number, String],
+      default: 160,
+    },
+    /** 是否开启自动上传 */
+    autoUpload: {
+      type: Boolean,
+      default: true,
+    },
+    /** 初始化数据 */
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    /** 接受的文件类型 */
+    accept: {
+      type: String,
+      default: 'image/*',
+    },
+    /** 最少图片数量 */
+    minNum: {
+      type: Number,
+      default: 0,
+    },
+    /** 最多图片数量, 0 表示无限制 */
+    maxNum: {
+      type: Number,
+      default: 0,
+    },
+    /** 是否可排序 */
+    sortable: {
+      type: Boolean,
+      default: false,
+    },
+    /** 是否可预览 */
+    preview: {
+      type: Boolean,
+      default: true,
+    },
+    /** 是否可以一次多选 */
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    /** 图像验证规则 */
+    rules: {
+      type: [Object, Function],
+      default: () => {},
+    },
+    /** 是否禁用, 禁用后只可展示 不可进行编辑操作, 包括: 新增, 修改, 删除, 改变顺序 */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /** 是否可清空 */
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    /** 上传前插入方法, 属于高级用法 */
+    beforeUpload: {
+      type: Promise,
+      default: null,
+    },
+    /** 重写上传方法, 如果重写则覆盖组件内上传方法 */
+    uploadFuc: {
+      type: [Function, Promise],
+      default: null,
+    },
+    /** 图像显示模式 */
+    fit: {
+      type: String,
+      default: 'contain',
+    },
+    suffix: {
+      type: Array,
+      default: () => ['jpg', 'jpeg', 'png', 'webp'],
+    },
+  },
+  computed: {
+    /** 每项容器样式 */
+    boxStyle() {
+      const { width, height, disabled } = this
+      const style = {}
+      if (typeof width === 'number') {
+        style.width = `${width}px`
+      } else if (typeof width === 'string') {
+        style.width = width
+      }
+      if (typeof height === 'number') {
+        style.height = `${height}px`
+      } else if (typeof height === 'string') {
+        style.height = height
+      }
+      if (disabled) {
+        style.cursor = 'not-allowed'
+      } else {
+        style.cursor = 'pointer'
+      }
+
+      /** 提示字体最大尺寸 */
+      let fontSize = 12
+      /** 每行提示预设 */
+      const maxText = 8
+      if (typeof width === 'number' && (width / maxText) < 12) {
+        fontSize = (width / 15).toFixed(2)
+      }
+      style.fontSize = `${fontSize}px`
+      style.textAlign = 'center'
+      style.position = 'relative'
+      style.display = 'flex'
+      style.alignItems = 'center'
+      style.justifyContent = 'center'
+      style.overflow = 'hidden'
+      style.lineHeight = '1.3'
+      style.flexDirection = 'column'
+
+      return style
+    },
+    /**
+     * 上传图像数量下限
+     * @returns {Number}
+     */
+    min() {
+      const { minNum } = this
+      return minNum < 0 ? 0 : parseInt(minNum, 10)
+    },
+    /**
+     * 上传图像数量上限
+     * @returns {Number}
+     */
+    max() {
+      const { min, maxNum } = this
+      // 兼容用最大值小于最小值情况
+      return (maxNum < min) ? min : parseInt(maxNum, 10)
+    },
+    /**
+     * 是否是固定数量(最小等于最大)
+     * @returns {Boolean}
+     */
+    isStable() {
+      const { min, max } = this
+      return (max !== 0) && (min === max)
+    },
+    /** 构造图像规范提示 */
+    rulesTip() {
+      const { rules } = this
+      const tips = []
+
+      /** 图像验证规则 */
+      let basicRule
+      // 针对动态规则模式, 获取输入为空时的规则
+      // 动态规则 rule 为函数, 当选择图片后根据选择的图片生成校验规则
+      if (typeof rules === 'function') {
+        try {
+          basicRule = rules()
+        } catch (err) {
+          basicRule = {}
+        }
+      } else {
+        basicRule = rules
+      }
+
+      // 宽高限制提示语
+      if (basicRule.width && basicRule.height) { // 固定宽高限制
+        tips.push(`宽高 ${basicRule.width}x${basicRule.height}`)
+      } else if (basicRule.width) { // 固定宽限制
+        tips.push(`宽度 ${basicRule.width}`)
+        tips.push(`${getRangeTip('高度', basicRule.minHeight, basicRule.maxHeight)}`)
+      } else if (basicRule.height) { // 固定高限制
+        tips.push(`高度 ${basicRule.height}`)
+        tips.push(`${getRangeTip('宽度', basicRule.minWidth, basicRule.maxWidth)}`)
+      } else { // 宽高都不固定
+        tips.push(`${getRangeTip('宽度', basicRule.minWidth, basicRule.maxWidth)}`)
+        tips.push(`${getRangeTip('高度', basicRule.minHeight, basicRule.maxHeight)}`)
+      }
+
+      // 宽高比限制提示语
+      if (basicRule.ratio) {
+        if (Array.isArray(basicRule.ratio)) {
+          tips.push(`宽高比 ${basicRule.ratio.join(':')}`)
+        } else {
+          tips.push(`宽高比 ${basicRule.ratio}`)
+        }
+      }
+
+      // 文件大小
+      if (basicRule.minSize || basicRule.maxSize) {
+        tips.push(getRangeTip('文件大小', basicRule.minSize, basicRule.maxSize, 'Mb'))
+      }
+
+      return tips
+    },
+  },
+  watch: {
+    /** 初始化值修改时重新初始化, 并且清空当前的编辑状态 */
+    value(val) {
+      // 初始化数据
+      this.initAll(val)
+      // 清除所有 input 状态
+      // 初始化拖拽状态
+    },
+  },
+  mounted() {
+    this.initAll(this.value)
+    // 初始化 Draggable
+  },
+  methods: {
+    move(id, step) {
+      const { itemList } = this
+      // 找到操作的元素
+      const index = itemList.findIndex(item => (item.id === id))
+      // 边界检测
+      if ((index + step) < 0 || (index + step) >= itemList.length) return
+      // 不可和最后一项输入换位子
+      if ((index + step) === (itemList.length - 1)) {
+        if (itemList[itemList.length - 1].status === 'input') return
+      }
+      const i = itemList[index]
+      const j = itemList[index + step]
+      itemList[index] = j
+      itemList[index + step] = i
+      this.itemList = [...itemList]
+    },
+    /**
+     * 验证上传的图像是否符合要求
+     */
+    async validateImg(imgInfo) {
+      const { rules } = this
+      let rule
+      // 针对动态规则模式, 获取输入为空时的规则
+      // 动态规则 rule 为函数, 当选择图片后根据选择的图片生成校验规则
+      if (typeof rules === 'function') {
+        try {
+          rule = rules(imgInfo)
+        } catch (err) {
+          rule = {}
+        }
+      } else {
+        rule = rules
+      }
+      // 宽高限制
+      if (rule.width) {
+        if (imgInfo.width !== rule.width) {
+          throw new Error(`"${imgInfo.name}"图像宽不符合要求, 需为${rule.width}`)
+        }
+      } else {
+        if (rule.minWidth && imgInfo.width < rule.minWidth) {
+          throw new Error(`"${imgInfo.name}"图像宽不符合要求, 至少为${rule.minWidth}`)
+        }
+        if (rule.maxWidth && imgInfo.width > rule.maxWidth) {
+          throw new Error(`"${imgInfo.name}"图像宽不符合要求, 至多为${rule.maxWidth}`)
+        }
+      }
+      if (rule.height) {
+        if (imgInfo.height !== rule.height) {
+          throw new Error(`"${imgInfo.name}"图像高不符合要求, 需为${rule.height}`)
+        }
+      } else {
+        if (rule.minHeight && imgInfo.height < rule.minHeight) {
+          throw new Error(`"${imgInfo.name}"图像高不符合要求, 至少为${rule.minHeight}`)
+        }
+        if (rule.maxHeight && imgInfo.height > rule.maxHeight) {
+          throw new Error(`"${imgInfo.name}"图像高不符合要求, 至多为${rule.maxHeight}`)
+        }
+      }
+
+      // 宽高比限制提示语
+      if (rule.ratio) {
+        let ratio
+        if (Array.isArray(rule.ratio)) {
+          ratio = rule.ratio[0] / rule.ratio[1]
+        } else {
+          // eslint-disable-next-line
+          ratio = rule.ratio
+        }
+        ratio = ratio.toFixed(2)
+        if ((imgInfo.width / imgInfo.height).toFixed(2) !== ratio) {
+          throw new Error(`"${imgInfo.name}"图像宽高比不符合要求, 需为${ratio}`)
+        }
+      }
+
+      // 文件大小
+      if (rule.minSize && imgInfo.size < rule.minSize * ONE_MB) {
+        throw new Error(`"${imgInfo.name}"图像文件大小比不符合要求, 至少为${rule.minSize}Mb`)
+      }
+      if (rule.maxSize && imgInfo.size > rule.maxSize * ONE_MB) {
+        throw new Error(`"${imgInfo.name}"图像文件大小比不符合要求, 至多为${rule.maxSize}Mb`)
+      }
+
+      return true
+    },
+    /**
+     * 选择图像文件后处理, 包括获取图像信息, 验证图像等
+     */
+    async handleChange(e) {
+      const { currentId } = this
+      const { files } = e.target
+      let imgInfoList
+
+      if (!files) return
+      /** 中间步骤缓存, 在出错时用于释放 createObjectURL 的内存 */
+      let cache = []
+      /**
+       * 处理单个图片, 返回处理成功的图片数据
+       * @param {File} file 图片文件
+       */
+      const handleImg = async (file) => {
+        try {
+          // 获取图像信息
+          const info = await this.getImgInfo(file)
+          cache.push(info)
+          // 验证图像信息
+          await this.validateImg(info)
+          return info
+        } catch (err) {
+          // 往外抛异常
+          throw err
+        }
+      }
+      const asyncList = []
+      for (let i = 0; i < files.length; i += 1) {
+        asyncList.push(handleImg(files[i]))
+      }
+      try {
+        imgInfoList = await Promise.all(asyncList)
+        // 设置图片信息
+        await this.setImgInfo(imgInfoList, currentId)
+      } catch (err) {
+        // 清空缓存
+        for (let i = 0; i < cache.length; i += 1) {
+          window.URL.revokeObjectURL(cache[i].localSrc)
+        }
+        cache = null
+        console.error(err)
+        this.$message.error(err.message)
+      }
+    },
+    /**
+     * 用户选择图片, 图片通过验证后设置图像数据
+     */
+    async setImgInfo(imgInfoList = [], currentId) {
+      const { max } = this
+      // 找到特定图像位置
+      const index = this.itemList.findIndex(item => (item.id === currentId))
+      // 替换图片
+      this.itemList[index] = createItem(imgInfoList[0])
+      // 追加图片
+      // 最大图片数量限制
+      let l = imgInfoList.length
+      if (max && l > max) {
+        l = max
+      }
+      for (let i = 1; i < l; i += 1) {
+        this.itemList.push(createItem(imgInfoList[i]))
+      }
+      // 初始化图片
+      this.initAll(this.itemList)
+    },
+    /**
+     * 支持键盘操作
+     */
+    handleKeydown(e, id) {
+      if (e.target !== e.currentTarget) return
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        this.handleClick(id)
+      }
+    },
+    /**
+     * 处理点击事件, 并转移到文件上传元素
+     */
+    handleClick(id) {
+      if (!this.disabled) {
+        this.currentId = id || ''
+        this.$refs.input.value = null
+        this.$refs.input.click()
+      }
+    },
+    /**
+     * 初始化 itemList
+     */
+    initItemList(val) {
+      const { max, isStable, disabled } = this
+      const result = []
+
+      // 初始值不存在情况
+      // 包括初始值不合法
+      if (!val || !Array.isArray(val) || val.length === 0) {
+        // 固定数量图像上传, 直接初始化固定数量的上传控件
+        if (isStable) {
+          for (let i = 0; i < max; i += 1) {
+            result.push(createItem())
+          }
+          this.itemList = result
+          return
+        }
+        // 如果不是固定上传数量, 则仅创建一个空项
+        result.push(createItem())
+        this.itemList = result
+        return
+      }
+
+      // 存在初始值
+      for (let i = 0; i < val.length; i += 1) {
+        result.push(createItem(val[i]))
+      }
+      // 初始项小于最大数量限制, 并且处于可编辑状态
+      if ((max === 0 || val.length < max) && !disabled) {
+        // 后面添加空项
+        result.push(createItem())
+      }
+      this.itemList = result
+    },
+    /**
+     * TODO: 预览初始化方法
+     */
+    initPreview() {
+      // 清除预览实例
+      if (!this.preview) {
+        return
+      }
+      // 初始化新预览实例
+      console.log('图像预览功能等待上线')
+    },
+    /**
+     * 初始化
+     * @param {object} val 初始化数据
+     */
+    initAll(val) {
+      this.initItemList(val)
+      this.initPreview()
+    },
+    /**
+     * 获取图像信息
+     */
+    async getImgInfo(file) {
+      const localSrc = window.URL.createObjectURL(file)
+      return new Promise((resolve, reject) => {
+        let image = new Image()
+        image.src = localSrc
+        image.onload = () => {
+          resolve({
+            localSrc,
+            file,
+            width: image.width,
+            height: image.height,
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            lastModified: file.lastModified,
+          })
+          image = null
+        }
+        image.onerror = () => {
+          reject(new Error('图像加载失败'))
+          image = null
+        }
+      })
+    },
+    /** 清空全部图片 */
+    clear() {
+      this.initAll([])
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.imgs-upload-container {
+  display: flex;
+  flex-wrap: wrap;
+
+  &:focus {
+    outline: none;
+  }
+
+  .upload-item,
+  .thumb-item {
+    border: 1px dashed #d9d9d9;
+    border-radius: 3px;
+    transition: all .1s;
+    color: #666666;
+    margin-right: 1em;
+    margin-bottom: 1em;
+
+    &.disabled {
+      color: #ababab;
+    }
+
+    &:not(.disabled):hover {
+      border-color: #3963bc;
+      color: #3963bc;
+    }
+  }
+
+  .thumb-item {
+    .control {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      background-color: rgba(0, 0, 0, .3);
+      transition: all .3s;
+      transition-delay: .1s;
+
+      .del {
+        background: #f4516c;
+        color: white;
+        position: absolute;
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        top: 0;
+        right: 0;
+        opacity: 0;
+        border-radius: 0 0 0 14px;
+        transition: all .1s;
+
+        &::before {
+          font-size: 12px;
+          position: absolute;
+          right: -1px;
+          transform: scale(0.7);
+        }
+
+        &:hover {
+          transform: translate(-3px, 3px) scale(1.5);
+        }
+
+      }
+
+      .preview {
+        color: white;
+        font-size: 2em;
+        transition: all .2s;
+
+        &:hover {
+          transform: scale(1.2);
+        }
+      }
+
+      .control-bottom {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        color: white;
+        background-color: rgba(0, 0, 0, .3);
+        font-size: 1.5em;
+        display: flex;
+        justify-content: space-around;
+        transform: translate(0, 100%);
+        transition: all .2s;
+        transition-delay: .1s;
+        padding: 5px 0;
+
+        .control-bottom-btn {
+          transform: all .2s;
+
+          &.disabled {
+            color: #ababab;
+            cursor: not-allowed;
+          }
+
+          &:not(.disabled):hover {
+            transform: scale(1.2);
+          }
+        }
+      }
+    }
+
+    &:hover {
+      .control {
+        opacity: 1;
+      }
+
+      .del {
+        opacity: 1;
+
+      }
+
+      .control-bottom {
+        transform: translate(0, 0);
+      }
+    }
+  }
+
+  .item__input {
+    display: none;
+  }
+}
+</style>

From aa3e40c75a73c2188ae28c5c0feee81ac4715c71 Mon Sep 17 00:00:00 2001
From: Zhanglinling <zhanglinling0926@gmail.com>
Date: Sun, 16 Jun 2019 18:45:57 +0800
Subject: [PATCH 2/8] =?UTF-8?q?feat(*):=20=E5=A4=9A=E5=9B=BE=E5=83=8F?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6demo=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/stage/plugins.js                |   2 +
 src/plugins/ImgsUpload/README.md           |  32 ++++++++
 src/plugins/ImgsUpload/assets/img/logo.png | Bin 0 -> 6490 bytes
 src/plugins/ImgsUpload/package.json        |  10 +++
 src/plugins/ImgsUpload/stage-config.js     |  24 ++++++
 src/plugins/ImgsUpload/views/Demo.vue      |  83 +++++++++++++++++++++
 6 files changed, 151 insertions(+)
 create mode 100644 src/plugins/ImgsUpload/README.md
 create mode 100644 src/plugins/ImgsUpload/assets/img/logo.png
 create mode 100644 src/plugins/ImgsUpload/package.json
 create mode 100644 src/plugins/ImgsUpload/stage-config.js
 create mode 100644 src/plugins/ImgsUpload/views/Demo.vue

diff --git a/src/config/stage/plugins.js b/src/config/stage/plugins.js
index cdf36f5c..f2ead05f 100644
--- a/src/config/stage/plugins.js
+++ b/src/config/stage/plugins.js
@@ -1,7 +1,9 @@
 // 本文件是自动生成, 请勿修改
+import ImgsUpload from '@/plugins/ImgsUpload/stage-config'
 import LinCmsUi from '@/plugins/LinCmsUi/stage-config'
 
 const pluginsConfig = [
+  ImgsUpload,
   LinCmsUi,
 ]
 
diff --git a/src/plugins/ImgsUpload/README.md b/src/plugins/ImgsUpload/README.md
new file mode 100644
index 00000000..0a2c3234
--- /dev/null
+++ b/src/plugins/ImgsUpload/README.md
@@ -0,0 +1,32 @@
+# 插件名: 图像上传组件示例(ImgsUpload)
+
+插件描述, 图像上传组件示例 用于处于xxx业务场景, 提供了xxx功能
+
+## 舞台视口列表
+
+### TestView
+
+地址: `/ImgsUpload/test.vue`
+显示xxx内容, 可进行xxx操作
+
+## 自由视口列表
+
+### Test
+
+属性:
+
+| Require | Name |  Type  | Default | Desc |
+|:-------:|:----:|:------:|:-------:|:----:|
+|  true   | name | String |   val   | 描述 |
+  
+事件:
+
+| Name |   Argument   | Desc |
+|:----:|:------------:|:----:|
+| name | 事件参数描述 | 描述 |
+
+方法:
+
+| Name |   Argument   |   Result   | Desc |
+|:----:|:------------:|:----------:|:----:|
+| name | 方法参数描述 | 返回值描述 | 描述 |
\ No newline at end of file
diff --git a/src/plugins/ImgsUpload/assets/img/logo.png b/src/plugins/ImgsUpload/assets/img/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..221e49b04418878428a148500e27746ffe256d82
GIT binary patch
literal 6490
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

literal 0
HcmV?d00001

diff --git a/src/plugins/ImgsUpload/package.json b/src/plugins/ImgsUpload/package.json
new file mode 100644
index 00000000..ad686a7a
--- /dev/null
+++ b/src/plugins/ImgsUpload/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "lc-plugin-imgs-upload",
+  "title": "图像上传组件示例",
+  "version": "1.0.0",
+  "_linVersion": "0.0.1-alpha.3",
+  "description": "展示图像上传组件能力",
+  "author": "",
+  "dependencies": {},
+  "devDependencies": {}
+}
\ No newline at end of file
diff --git a/src/plugins/ImgsUpload/stage-config.js b/src/plugins/ImgsUpload/stage-config.js
new file mode 100644
index 00000000..267d325e
--- /dev/null
+++ b/src/plugins/ImgsUpload/stage-config.js
@@ -0,0 +1,24 @@
+const ImgsUploadRouter = {
+  route: null,
+  name: null,
+  title: '图像上传',
+  type: 'folder',
+  icon: 'iconfont icon-demo',
+  filePath: 'views/ImgsUpload/',
+  order: null,
+  inNav: true,
+  children: [
+    {
+      title: '图像上传展示',
+      type: 'view',
+      name: 'ImgsUploadDemo',
+      route: '/imgs-upload/stage1',
+      filePath: 'plugins/ImgsUpload/views/Demo.vue',
+      inNav: true,
+      icon: 'iconfont icon-demo',
+      right: null,
+    },
+  ],
+}
+
+export default ImgsUploadRouter
diff --git a/src/plugins/ImgsUpload/views/Demo.vue b/src/plugins/ImgsUpload/views/Demo.vue
new file mode 100644
index 00000000..80ee0dec
--- /dev/null
+++ b/src/plugins/ImgsUpload/views/Demo.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="lin-container">
+    <div class="lin-title">插件ImgsUpload舞台页面</div>
+    <el-divider></el-divider>
+    <div class="lin-wrap">
+      <el-form label-width="180px">
+        <el-form-item label="带初始化">
+          <upload-imgs
+            :value="initData"
+            :rules="rules"
+            :multiple="true"
+            :max-num="5" />
+        </el-form-item>
+        <el-form-item label="普通示例">
+          <upload-imgs :rules="rules" :multiple="true" />
+        </el-form-item>
+        <el-form-item label="禁用">
+          <upload-imgs :rules="rules2" :multiple="true" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="排序+固定数量">
+          <upload-imgs
+            :rules="rules2"
+            :multiple="true"
+            :min-num="3"
+            :max-num="3"
+            :sortable="true" />
+        </el-form-item>
+        <el-form-item label="最大数量">
+          <upload-imgs :rules="rules" :multiple="true" :max-num="3" />
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadImgs from '@/components/base/upload-imgs'
+
+export default {
+  name: 'ImgsUploadStage1',
+  components: {
+    UploadImgs,
+  },
+  data() {
+    return {
+      rules: {
+        minWidth: 100,
+        minHeight: 100,
+        maxSize: 5,
+      },
+      rules2: {
+        minWidth: 100,
+        maxWidth: 2000,
+      },
+      initData: [{
+        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',
+      }],
+    }
+  },
+  // 计算属性设置
+  computed: {},
+  // 数据变更监听
+  watch: {},
+  mounted() {},
+  // 当页面使用路由参数时, 参数部分变化触发的动作在本函数中操作
+  // https://router.vuejs.org/zh/guide/advanced/navigation-guards.htmll#组件内的守卫
+  // beforeRouteUpdate(to, from, next) {
+  //   // this.name = to.params.name
+  //   // this.init()
+  //   // next()
+  // },
+  methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+</style>

From 84f9ea739404eea473de969396a9dfa1b95e0f25 Mon Sep 17 00:00:00 2001
From: Zhanglinling <zhanglinling0926@gmail.com>
Date: Sun, 16 Jun 2019 19:04:34 +0800
Subject: [PATCH 3/8] =?UTF-8?q?feat(upload-imgs):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E7=AE=80=E5=8D=95=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/upload-imgs/index.vue | 15 +++++++++++++--
 src/plugins/ImgsUpload/views/Demo.vue     | 10 ++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/base/upload-imgs/index.vue b/src/components/base/upload-imgs/index.vue
index bd544a4d..1f4e7656 100644
--- a/src/components/base/upload-imgs/index.vue
+++ b/src/components/base/upload-imgs/index.vue
@@ -52,14 +52,20 @@
             <div class="preview" title="更换图片" @click.prevent.stop="handleClick(item.id)">
               <i class="el-icon-edit"></i>
             </div>
-            <div class="control-bottom">
+            <div class="control-bottom" v-if="sortable || preview">
               <i
+                v-if="sortable"
                 title="前移"
                 class="control-bottom-btn el-icon-back"
                 :class="{disabled: (i === 0)}"
                 @click.stop="move(item.id, -1)"></i>
-              <i class="control-bottom-btn el-icon-view" title="预览"></i>
               <i
+                v-if="preview"
+                class="control-bottom-btn el-icon-view"
+                title="预览"
+                @click.stop="previewImg(item)"></i>
+              <i
+                v-if="sortable"
                 title="后移"
                 class="control-bottom-btn el-icon-right"
                 :class="{disabled: (i === (itemList.length - 1))}"
@@ -381,6 +387,11 @@ export default {
     // 初始化 Draggable
   },
   methods: {
+    previewImg(data) {
+      this.$confirm(`<img src="${data.display}" style="width: 100%; height: 100%" />`, '预览', {
+        dangerouslyUseHTMLString: true,
+      })
+    },
     move(id, step) {
       const { itemList } = this
       // 找到操作的元素
diff --git a/src/plugins/ImgsUpload/views/Demo.vue b/src/plugins/ImgsUpload/views/Demo.vue
index 80ee0dec..acf5f820 100644
--- a/src/plugins/ImgsUpload/views/Demo.vue
+++ b/src/plugins/ImgsUpload/views/Demo.vue
@@ -28,6 +28,12 @@
         <el-form-item label="最大数量">
           <upload-imgs :rules="rules" :multiple="true" :max-num="3" />
         </el-form-item>
+        <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" fit="cover" :value="initData" />
+        </el-form-item>
       </el-form>
     </div>
   </div>
@@ -60,6 +66,10 @@ export default {
         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',
       }],
     }
   },

From d6964cbb33645cc2131111016d02ce51fd6e3d00 Mon Sep 17 00:00:00 2001
From: Zhanglinling <zhanglinling0926@gmail.com>
Date: Sun, 16 Jun 2019 19:13:43 +0800
Subject: [PATCH 4/8] =?UTF-8?q?feat(upload-imgs):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/upload-imgs/index.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/base/upload-imgs/index.vue b/src/components/base/upload-imgs/index.vue
index 1f4e7656..5bc3493c 100644
--- a/src/components/base/upload-imgs/index.vue
+++ b/src/components/base/upload-imgs/index.vue
@@ -48,7 +48,7 @@
             :fit="fit"
             style="width: 100%; height: 100%;"></el-image>
           <div class="control">
-            <i class="el-icon-close del" @click.prevent.stop="close(index)" title="删除"></i>
+            <i class="el-icon-close del" @click.prevent.stop="delItem(item.id)" title="删除"></i>
             <div class="preview" title="更换图片" @click.prevent.stop="handleClick(item.id)">
               <i class="el-icon-edit"></i>
             </div>
@@ -387,6 +387,12 @@ export default {
     // 初始化 Draggable
   },
   methods: {
+    delItem(id) {
+      const { itemList } = this
+      // 根据id找到对应项
+      const index = itemList.findIndex(item => (item.id === id))
+      itemList.splice(index, 1)
+    },
     previewImg(data) {
       this.$confirm(`<img src="${data.display}" style="width: 100%; height: 100%" />`, '预览', {
         dangerouslyUseHTMLString: true,

From c8214d319d76c28e266d90e454e9663525110c95 Mon Sep 17 00:00:00 2001
From: Zhanglinling <zhanglinling0926@gmail.com>
Date: Sun, 16 Jun 2019 19:34:23 +0800
Subject: [PATCH 5/8] =?UTF-8?q?fix(upload-imgs):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=BD=93=E5=9B=BA=E5=AE=9A=E9=A1=B9=E6=97=B6,=20=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E5=92=8C=E6=8E=92=E5=BA=8F=E7=9A=84=E8=A1=8C=E4=B8=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/upload-imgs/index.vue | 39 +++++++++++++++++------
 src/plugins/ImgsUpload/views/Demo.vue     |  6 ++++
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/components/base/upload-imgs/index.vue b/src/components/base/upload-imgs/index.vue
index 5bc3493c..1fcaec0f 100644
--- a/src/components/base/upload-imgs/index.vue
+++ b/src/components/base/upload-imgs/index.vue
@@ -38,7 +38,7 @@
 -->
 
 <template>
-  <div class="imgs-upload-container">
+  <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">
@@ -48,13 +48,13 @@
             :fit="fit"
             style="width: 100%; height: 100%;"></el-image>
           <div class="control">
-            <i class="el-icon-close del" @click.prevent.stop="delItem(item.id)" title="删除"></i>
-            <div class="preview" title="更换图片" @click.prevent.stop="handleClick(item.id)">
+            <i v-if="!disabled" class="el-icon-close del" @click.prevent.stop="delItem(item.id)" title="删除"></i>
+            <div v-if="!disabled" class="preview" title="更换图片" @click.prevent.stop="handleClick(item.id)">
               <i class="el-icon-edit"></i>
             </div>
             <div class="control-bottom" v-if="sortable || preview">
               <i
-                v-if="sortable"
+                v-if="sortable && !disabled"
                 title="前移"
                 class="control-bottom-btn el-icon-back"
                 :class="{disabled: (i === 0)}"
@@ -63,9 +63,10 @@
                 v-if="preview"
                 class="control-bottom-btn el-icon-view"
                 title="预览"
+                style="cursor: pointer;"
                 @click.stop="previewImg(item)"></i>
               <i
-                v-if="sortable"
+                v-if="sortable && !disabled"
                 title="后移"
                 class="control-bottom-btn el-icon-right"
                 :class="{disabled: (i === (itemList.length - 1))}"
@@ -387,25 +388,43 @@ export default {
     // 初始化 Draggable
   },
   methods: {
+    getValue() {
+
+    },
+    /**
+     * 删除某项
+     */
     delItem(id) {
-      const { itemList } = this
+      const { itemList, isStable } = this
       // 根据id找到对应项
       const index = itemList.findIndex(item => (item.id === id))
-      itemList.splice(index, 1)
+      if (isStable) {
+        // 固定数量图片, 删除后留下空项
+        itemList[index] = createItem()
+        this.itemList = [...itemList]
+      } else {
+        itemList.splice(index, 1)
+      }
     },
+    /**
+     * 预览图像, 后续预览组件制作后替换
+     */
     previewImg(data) {
       this.$confirm(`<img src="${data.display}" style="width: 100%; height: 100%" />`, '预览', {
         dangerouslyUseHTMLString: true,
       })
     },
+    /**
+     * 移动图像位置
+     */
     move(id, step) {
-      const { itemList } = this
+      const { itemList, isStable } = this
       // 找到操作的元素
       const index = itemList.findIndex(item => (item.id === id))
       // 边界检测
       if ((index + step) < 0 || (index + step) >= itemList.length) return
-      // 不可和最后一项输入换位子
-      if ((index + step) === (itemList.length - 1)) {
+      // 非固定项时, 不可和最后一项输入换位子
+      if (!isStable && (index + step) === (itemList.length - 1)) {
         if (itemList[itemList.length - 1].status === 'input') return
       }
       const i = itemList[index]
diff --git a/src/plugins/ImgsUpload/views/Demo.vue b/src/plugins/ImgsUpload/views/Demo.vue
index acf5f820..6cd7126b 100644
--- a/src/plugins/ImgsUpload/views/Demo.vue
+++ b/src/plugins/ImgsUpload/views/Demo.vue
@@ -17,6 +17,12 @@
         <el-form-item label="禁用">
           <upload-imgs :rules="rules2" :multiple="true" :disabled="true" />
         </el-form-item>
+        <el-form-item label="禁用+初始化">
+          <upload-imgs :rules="rules2" :multiple="true" :disabled="true" :value="initData" />
+        </el-form-item>
+        <el-form-item label="禁用+初始化+不预览">
+          <upload-imgs :rules="rules2" :multiple="true" :disabled="true" :value="initData" :preview="false" />
+        </el-form-item>
         <el-form-item label="排序+固定数量">
           <upload-imgs
             :rules="rules2"

From cf092775d7bab497b9212295e0aa8a736d2af072 Mon Sep 17 00:00:00 2001
From: Zhanglinling <zhanglinling0926@gmail.com>
Date: Sun, 16 Jun 2019 20:11:38 +0800
Subject: [PATCH 6/8] =?UTF-8?q?feat(upload-imgs):=20=E6=A2=B3=E7=90=86?=
 =?UTF-8?q?=E5=88=9B=E5=BB=BA=E9=A1=B9=E6=97=B6=E7=8A=B6=E6=80=81=E5=8F=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/upload-imgs/index.vue | 51 ++++++++++++++---------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/components/base/upload-imgs/index.vue b/src/components/base/upload-imgs/index.vue
index 1fcaec0f..e930403b 100644
--- a/src/components/base/upload-imgs/index.vue
+++ b/src/components/base/upload-imgs/index.vue
@@ -111,35 +111,46 @@ function createId() {
  * 创建项, 如不传入参数则创建空项
  * @returns {Item}
  */
-function createItem(data = null) {
-  const item = {
+function createItem(data = null, oldData = null) {
+  let item = {
     loading: false,
     id: createId(),
     status: 'input', // new/edit/del/init/input
     display: '',
     src: '',
-    imgInfo: null,
   }
+  // 未传入data, 说明是单纯新建, 单纯新建的值是输入框状态
   if (!data) {
     return item
   }
-  if (data.id) {
-    return data
-  }
+  // 没有id, 说明是用户点击选择的本地图片
+  if (!data.id) {
+    if (oldData) {
+      // 如果旧数据状态是输入框, 则为新图片
+      if (oldData.status === 'input') {
+        item.status = 'new'
+      }
+      // 如果旧数据状态是初始化 init, 则为修改
+      if (oldData.status === 'init' || oldData.status === 'edit') {
+        item.status = 'edit'
+      }
+    } else {
+      item.status = 'new'
+    }
 
-  // 新传入图片信息
-  if (data.localSrc) {
-    item.id = data.id || item.id
-    item.src = data.src || item.src
+    item.id = oldData.id || item.id
+    item.src = ''
     item.display = data.localSrc || item.display
-    item.status = 'new'
-  } else {
-    item.id = data.id || item.id
-    item.src = data.src || item.src
-    item.display = data.display || item.display
-    item.status = 'init'
+    item = Object.assign({}, data, item)
+    return item
   }
 
+  // 存在id, 说明是传入已存在数据
+  item.id = data.id
+  item.src = data.src || item.src
+  item.display = data.display || item.display
+  item.status = data.status || 'init'
+  item = Object.assign({}, data, item)
   return item
 }
 
@@ -165,7 +176,7 @@ function getRangeTip(prx, min, max, unit = '') {
 }
 
 export default {
-  name: 'UploadPicture',
+  name: 'UploadImgs',
   data() {
     return {
       itemList: [],
@@ -555,7 +566,7 @@ export default {
       // 找到特定图像位置
       const index = this.itemList.findIndex(item => (item.id === currentId))
       // 替换图片
-      this.itemList[index] = createItem(imgInfoList[0])
+      this.itemList[index] = createItem(imgInfoList[0], this.itemList[index])
       // 追加图片
       // 最大图片数量限制
       let l = imgInfoList.length
@@ -615,8 +626,8 @@ export default {
       for (let i = 0; i < val.length; i += 1) {
         result.push(createItem(val[i]))
       }
-      // 初始项小于最大数量限制, 并且处于可编辑状态
-      if ((max === 0 || val.length < max) && !disabled) {
+      // 初始项小于最大数量限制, 并且处于可编辑状态, 并且最后一项不是input
+      if ((max === 0 || val.length < max) && !disabled && val[val.length - 1].status !== 'input') {
         // 后面添加空项
         result.push(createItem())
       }

From 56bd2c85cfcf4a661159ba966ca0311a55087972 Mon Sep 17 00:00:00 2001
From: Zhanglinling <zhanglinling0926@gmail.com>
Date: Sun, 16 Jun 2019 20:23:10 +0800
Subject: [PATCH 7/8] =?UTF-8?q?feat(upload-imgs):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=92=8C=E5=88=A0=E9=99=A4=E6=97=B6=E7=9A=84?=
 =?UTF-8?q?=E5=86=85=E5=AD=98=E9=87=8A=E6=94=BE=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/upload-imgs/index.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/base/upload-imgs/index.vue b/src/components/base/upload-imgs/index.vue
index e930403b..71086476 100644
--- a/src/components/base/upload-imgs/index.vue
+++ b/src/components/base/upload-imgs/index.vue
@@ -399,8 +399,8 @@ export default {
     // 初始化 Draggable
   },
   methods: {
-    getValue() {
-
+    async getValue() {
+      // 获取需要上传
     },
     /**
      * 删除某项
@@ -409,6 +409,7 @@ export default {
       const { itemList, isStable } = this
       // 根据id找到对应项
       const index = itemList.findIndex(item => (item.id === id))
+      const blobUrl = itemList[index].display
       if (isStable) {
         // 固定数量图片, 删除后留下空项
         itemList[index] = createItem()
@@ -416,6 +417,8 @@ export default {
       } else {
         itemList.splice(index, 1)
       }
+      // 释放内存
+      window.URL.revokeObjectURL(blobUrl)
     },
     /**
      * 预览图像, 后续预览组件制作后替换
@@ -565,6 +568,8 @@ export default {
       const { max } = this
       // 找到特定图像位置
       const index = this.itemList.findIndex(item => (item.id === currentId))
+      // 释放内存
+      window.URL.revokeObjectURL(this.itemList[index].display)
       // 替换图片
       this.itemList[index] = createItem(imgInfoList[0], this.itemList[index])
       // 追加图片

From 4327d08d880fc8c851521777c2c6c857b493ad39 Mon Sep 17 00:00:00 2001
From: Zhanglinling <zhanglinling0926@gmail.com>
Date: Sun, 16 Jun 2019 21:16:55 +0800
Subject: [PATCH 8/8] =?UTF-8?q?feat(upload-imgs):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=B9=B6=E8=8E=B7=E5=8F=96=E6=95=B0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=8D=AE=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/upload-imgs/index.vue | 72 ++++++++++++++++++++++-
 src/plugins/ImgsUpload/views/Demo.vue     | 47 +++++++++++++--
 2 files changed, 113 insertions(+), 6 deletions(-)

diff --git a/src/components/base/upload-imgs/index.vue b/src/components/base/upload-imgs/index.vue
index 71086476..74c16cd8 100644
--- a/src/components/base/upload-imgs/index.vue
+++ b/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,
+      }))
     },
     /**
      * 删除某项
diff --git a/src/plugins/ImgsUpload/views/Demo.vue b/src/plugins/ImgsUpload/views/Demo.vue
index 6cd7126b..23409195 100644
--- a/src/plugins/ImgsUpload/views/Demo.vue
+++ b/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>