vue+element+viewer的图片上传，预览，删除，编辑图片链接文字，限制上传最大数

先上图：


本人一菜鸟，改不来element的Upload 上传，于是只好手撸了-。-。，P话不多，上代码：

<template>
  <div class="slideshow">
    <el-button type="primary" @click="dialogVisibleImg = true">上传图片</el-button>
    <!--    图片上传-->
    <el-dialog
        title="编辑标题和链接"
        :visible.sync="dialogVisibleImg"
        width="40%">
      <div>
        <div class="disContent">
          <div v-for="(item, index) in imgs" :key="index" class="img-div"
               @click="switcherCss(item, index)"
               :class="{'pitchCss':active === index}">
            <img :src="item.picture" alt="">
            <div class="disContent-hide">
              <el-tooltip class="item" effect="dark" content="预览" placement="top">
                <span class="iconfont iconfangdajing yuLan">
                    <viewer :images="imgs">
                        <img :src="item.picture" alt="" class="yuLanImg">
                    </viewer>
                </span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <span class="Delete" @click="deleteImg(item,index)"><i class="el-icon-delete"></i></span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <span class="editCss" @click="editTitle(item, index)"><i class="el-icon-edit"></i></span>
              </el-tooltip>
            </div>
          </div>
          <div class="img-file" v-if='imgs.length < maxCount'>
            <input type="file" id='files' @change='fileChange($event)' multiple="multiple"
                   ref="FileValue">
            <label for="files" class="labelCss">
              <i class="el-icon-plus"></i>
            </label>
          </div>
        </div>
        <el-dialog
            width="40%"
            title="编辑标题和链接"
            :visible.sync="innerVisible"
            append-to-body>
          <div>
            <el-form label-width="80px" :model="ruleForm" v-for="(item, index) in titleData" :key="index">
              <el-form-item label="标题">
                <el-input v-model="item.title"></el-input>
              </el-form-item>
              <el-form-item label="文本">
                <el-input v-model="item.content" type="textarea"
                          :rows="4"></el-input>
              </el-form-item>
              <el-form-item label="链接">
                <el-input v-model="item.url"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="innerVisible = false">取消</el-button>
            <el-button @click="saveTitle" type="primary">已完成</el-button>
          </div>
        </el-dialog>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleImg = false">取消</el-button>
        <el-button @click="dialogVisibleImg = false" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'slideshow',
  data () {
    return {
      imgs: [], // 图片数据
      imgfiles: [],
      maxCount: 5, // 上传最大限制
      innerVisible: false, // 编辑标题和Url
      dialogVisibleImg: false,
      ruleForm: {},
      index: '', // 获取图标下标
      imgData: '', // 图片数据
      titleData: [], // 编辑文本的数据
      active: 0, // 切换选中样式
      getItem: {} // 获取当前选择的item数据
    }
  },
  methods: {
    // 加入图片
    fileChange (e) {
      var _this = this
      var file = e.target.files
      var leng = file.length
      if (leng + _this.imgs.length > _this.maxCount) {
        alert('最多只能上传' + _this.maxCount + '张图片！')
        return
      }
      for (var i = 0; i < leng; i++) {
        var reader = new FileReader() // 使用 FileReader 来获取图片路径及预览效果
        _this.imgfiles.push(file[i])
        reader.readAsDataURL(file[i])
        reader.onload = function (e) {
          let obj = {
            title: '',
            content: '',
            url: '',
            picture: e.target.result
          }
          _this.imgs.push(obj) // base64 图片地址形成预览
        }
      }
      this.$refs.FileValue.value = '' // 这里不清空一次会导致相同的图片无法上传
    },
    // 删除图片
    deleteImg (item, index) {
      this.imgfiles.splice(index, 1)
      this.imgs.splice(index, 1)
    },
    // 打开编辑文本框
    editTitle (item, index) {
      this.innerVisible = true
      this.index = index
      this.imgData = item.data
      // 这里使用this.$set,是由于JavaScript的限制,Vue 不能检测以下变动的数组：
      // 当你利用索引直接设置一个对象时: 例如: this.imgs[0] = obj 会发现不能被检测到
      // 解决: 用$set方法 this.$set(Array, index, value)
      this.$set(this.titleData, 0, JSON.parse(JSON.stringify(item)))
    },
    // 保存图片文字编辑
    saveTitle () {
      let obj = JSON.parse(JSON.stringify(this.titleData[0]))
      this.$set(this.imgs, this.index, obj)
      this.innerVisible = false
    },
    // 切换显示图片
    switcherCss (item, index) {
      this.active = index // 选中切换样式
      this.getItem = JSON.parse(JSON.stringify(item)) // 这里深复制当前选中的对象，准备保存的时候使用
    }
  }
}
</script>
<style lang='less'>
  .el-dialog__header {
    min-height: 40px;
  }
  @import '../../../common/css/elementCommon';
</style>
<style lang='less' scoped>
  .slideshow{
    padding: 80px;
    .flexCss{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #files {
      display: none;
    }
    .banner-content{
      >h2{
        width: 80%;
      }
    }
    .labelCss {
      width: 100%;
      height: 100%;
      font-size: 40px;
      cursor: pointer;
      .flexCss;
    }
    .disContent {
      padding: 0 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .img-div {
        position: relative;
        margin: auto 10px 10px 10px;
        width: 120px;
        height: 120px;
        border-radius: 4px;
        .flexCss;
        border: 1px solid #e3e3e3;
        > img {
          max-height: 100%;
          max-width: 100%;
        }
        .disContent-hide {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 4px;
          background-color: rgba(48, 48, 48, 0.59);
          display: none;
        }
        .Delete {
          position: absolute;
          bottom: 14px;
          right: 10px;
          font-size: 16px;
          color: white;
          cursor: pointer;
        }
        .editCss {
          .Delete;
          font-size: 16px;
          right: 90px;
        }
        .yuLan {
          .Delete;
          font-size: 16px;
          right: 50px;
        }
        .yuLanImg {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
      .img-div:hover .disContent-hide {
        display: block;
      }
      .img-file {
        .img-div;
      }
      .pitchCss {
        border: 1px solid #202e78;
        transition: all linear 0.1s;
        width: 116px;
        height: 116px;
      }
    }
  }
</style>

有啥写的不对的希望大佬指出，提示一下预览要下载一个Viewer的插件