el-upload实现简单的图片上传组件(可预览,删除,下载)

父组件

<ImgArr
   @updateData="updateData"
    :params="options"
/>

updateData (val) {
 	this.imgArr = val
},

dara: {
	return {
	      options: {
	        imgArr: []
	      },
	}
}

组件完整代码如下:

<template>
  <div class="imgArr-component">
    <div v-for="(item, index) in options.imgArr" :key="index" @click="changeImg(index)" class="imgBox">
      <el-upload class="avatar-uploader" action="#">
        <img v-if="item" :src="item" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <div class="uploadActions" @click.stop v-if="item">
          <span v-if="options.previewStatus" @click="handlePreview(item)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span v-if="options.downloadStatus" @click="handleDownload(item)">
            <i class="el-icon-download"></i>
          </span>
          <span v-if="options.removeStatus" @click="handleRemove(item, index)">
            <i class="el-icon-delete"></i>
          </span>
        </div>
      </el-upload>
    </div>

    <el-dialog :visible.sync="dialogVisible" :modal="false" @close="dialogVisible = false">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <div class="imgBox">
      <el-upload
        v-show="options.imgArr.length < options.limit"
        v-loading="loadingStatus"
        class="avatar-uploader"
        :action="baseUrl"
        :on-success="handleAvatarSuccess"
        :on-progress="handleAvatarProgress"
        :show-file-list="false">
          <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    params: {
      type: 'Object',
      default: {}
    }
  },
  data () {
    return {
      dialogVisible: false,
      loadingStatus: false,
      baseUrl: '/api/service/oss/aliyun/upload?prefix=pop'
    }
  },
  computed: {
    options () {
      return {
        imgArr: [], // 图片url数组
        limit: 3, // 限制个数
        previewStatus: true, // 预览
        downloadStatus: false, // 下载
        removeStatus: true, // 移除
        ...this.params
      }
    }
  },
  methods: {
    handlePreview (val) {
      this.dialogVisible = true
      this.dialogImageUrl = val
    },
    handleDownload (val) {
      window.open(val)
    },
    handleRemove (val, index) {
      this.$confirm('确定删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.options.imgArr.splice(index, 1)
        this.$emit('updateData', this.options.imgArr)
      })
        .catch(() => {
          this.$message.info('已取消')
        })
    },
    handleAvatarSuccess (res) {
      this.loadingStatus = false
      let env = this.$mainStore.state.config.env
      let imgUrl = env.ossHost + '/' + res.path
      this.options.imgArr.length < 3 && this.options.imgArr.push(imgUrl)
      this.$emit('updateData', this.options.imgArr)
    },
    handleAvatarProgress () {
      this.loadingStatus = true
    }
  }
}
</script>

.<style lang="less">
.el-loading-spinner{ //loading位置
  margin-top: -40%;
}
.imgArr-component{
    .uploadActions{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0,0,0,.5);
      transition: opacity .3s;

      display: flex;
      justify-content: space-around;
      align-items: center;

      span {
        display: none;
        cursor: pointer;
      }
    }
    .uploadActions:hover{
      opacity: 1;
    }
    .uploadActions:hover span {
      display: inline-block;
    }
  .imgBox{
    width: 100px;
    height: 100px;
    line-height: 100px;
    display: inline-block;
  }
  .avatar-uploader{
    width: 100%;
    height: 100%;
  }
  .el-upload {
    width: 100%;
    height: 100%;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 100%;
    line-height: 100%;
    text-align: center;
  }
  .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
}

</style>