wvp/web_src/src/components/common/SImg.vue

<template>
  <div class="imgBox">
    <el-image v-show="showRaw" :src="rawImage" alt="21" class="baseImg"/>
    <img v-show="!showRaw" ref="showImg" src="" alt="" class="showImg"/>
    <input class="fileInput"
           type="file"
           accept="image/png, image/jpeg"
           ref="fileInput"
           @change="fileChangeHandle">
    <div class="closeBtn" @click="clearSelect">x</div>
  </div>
</template>

<script>
export default {
  name: "ImgSelect",
  props:{
    rawImage:{default:''}
  },
  data(){
    return {
      //
      showRaw: true,
    }
  },
  mounted(){
    console.log(this.showRaw);
  },
  methods:{
    fileChangeHandle(){
      let files = this.$refs.fileInput.files;
      console.log(files);
      console.log('1234');
      let imgFile = files[0];
      if(!imgFile){
        this.showRaw = true;
        return this.$message.warning('未选择图片')}
      // 检查格式
      let imageTypeReg = /^image\//;
      if(!imageTypeReg.test(imgFile.type)){
        this.$refs.fileInput.files = null;
        this.showRaw = true;
        return this.$message.warning('未受支持的格式')
      }
      // 发送change事件
      this.$emit("imgChange",imgFile);
      this.showRaw = false;
      // 设置预览图
      this.$refs.showImg.file = imgFile;
      let reader = new FileReader();
      reader.onload = (function(aImg) {
        return function(e) { aImg.src = e.target.result; }; })
      (this.$refs.showImg);
      reader.readAsDataURL(imgFile);
    },
    clearSelect(){
      this.showRaw = true;
      this.$emit("imgChange")
    }
  }
}
</script>

<style scoped>
.imgBox{
  width: 100%;
  height: 100%;
  min-width: 50px;
  min-height: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  box-shadow: 0 0 3px lightgray;
}
.imgBox .showImg,.fileInput,.baseImg{
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
}
.imgBox .fileInput{
  left: 0;
  top: 0;
}
.imgBox .showImg,.baseImg{
  height: 100%;
  width: auto;
  max-width: 100%;
}
.imgBox .fileInput{
  opacity: 0;
}
.imgBox .closeBtn{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 5px;
  top: 5px;
  color: red;
  cursor: pointer;
  box-shadow: 1px 1px 2px gray;
}

</style>