el-upload单张上传图片可预览可删除

组件代码

<template>
  <div class="component-upload-image">
    <!-- :headers="headers" -->
    <el-upload class="uploader-box" :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess" :on-error="handleUploadError"
      :show-file-list="false" :disabled="disableds">
      <div v-if="imgUrl" class="uploader-image">
        <img class="uploader-image" :src="imgUrl" />
        <div class="mask">
          <div title="预览" @click.stop="handlePictureCardPreview()">
            <i class="el-icon-zoom-in"></i>
          </div>
          <div style="margin-left:30px;" title="移除" @click.stop="removeImage()">
            <i class="el-icon-delete"></i>
          </div>

        </div>
      </div>
      <div v-else class="uploader-icon">
        <i class="el-icon-plus"></i>
      </div>

    </el-upload>

    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <img :src="imgUrl" style="display: block; max-width: 100%; margin: 0 auto">
    </el-dialog>
  </div>
</template>

<script>
  import {
    getToken
  } from '@/utils/auth'

  export default {
    props: {
      keyWords:{
        type:String
      },
      imgUrl:{
        type:String
      },
      disableds:{
        type:Boolean
      }
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        baseUrl: process.env.VUE_APP_DOMAIN_PREFIX,
        uploadImgUrl: process.env.VUE_APP_DOMAIN_PREFIX + '/file/upload', // 上传的图片服务器地址
        // headers: {
        //   Authorization: 'Bearer ' + getToken()
        // },
      }
    },
    mounted() {
       console.log(this.keyWords,'this.keyWords')
    },
    methods: {
      // 移除上传图片
      removeImage(){
        this.$emit('handleRemove',this.keyWords)
      },
      // 预览图片
      handlePictureCardPreview(url){
          this.dialogVisible=true
      },
      // 上传成功回调
      handleUploadSuccess(res, file) {
        console.log(this.keyWords,'this.keyWords')

        if (res.code === '') {
           let url = res.data.url
           let data={
             key:this.keyWords,
             url:url
           }
          this.$emit('handleSuccess',data)
        }
      },
      // 上传失败
      handleUploadError() {
        this.$modal.msgError('上传图片失败，请重试')
      },
    }
  }
</script>
<style scoped lang="scss">
  .uploader-box,
  .uploader-box .el-upload, .uploader-box ::v-deep .el-upload--picture-card {
    width: 170px;
    height: 170px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 170px;
    height: 170px;
  }

  .uploader-image {
    width: 170px;
    height: 170px;
    position: relative;
    box-sizing: border-box;
  }

  .mask {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 170px;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 1);
    transition: all 0.3s;
  }

  .uploader-image:hover .mask {
    opacity: 1;
  }
</style>

引用组件代码

<single-upload :disableds="keywords=='details'?true:false" :keyWords="'contact_id_card_back_img1'"
                    :imgUrl="ruleForm.contact_id_card_back_img1" @handleRemove="handleRemove"
                    @handleSuccess='handleSuccess'>
</single-upload>