图片上传到本地预览(使用base64传图片和blob转图片)，自动缩放占满盒子，点击放大图片

           <el-image
                  ref="IMG"
                  class="upImgSure"
                  :src="img"
                  :preview-src-list="imgPreview"
                  alt=""
                  @click="gitBigImage"
                >
                  <div slot="error" class="image-slot">
                    <!-- -->
                    <div class="imageDivText">
                      <p style="color: #ccc">暂无图片</p>
                    </div>
                  </div>
                </el-image>
              
                 <el-upload
                  ref="upload"
                  class="upload-demo"
                  action="#"
                  :show-file-list="showfilelist"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="handleBannerSuccess"
                  :file-list="fileList"
                  :auto-upload="false"
                  :on-change="changUpload"
                >
                  <div slot="trigger" class="up">选取文件</div>
                </el-upload>
      
      imgPreview: [],//点击放大时的路径
      img //图片路径
      showfilelist: false, //默认不显示上传文件

   gitBigImage () {//点击放大方法
      if (this.img) {
        this.imgPreview = [this.img]
      }
    },

   changUpload (file, fileList) {
       //注释部分是bo本地上传图片预览 ，
      // var URL = null;
      // if (window.createObjectURL !== undefined) {
      //   // basic
      //   URL = window.createObjectURL(event.raw);
      // } else if (window.URL !== undefined) {
      //   // mozilla(firefox)
      //   URL = window.URL.createObjectURL(event.raw);
      // } else if (window.webkitURL !== undefined) {
      //   // webkit or chrome
      //   URL = window.webkitURL.createObjectURL(event.raw);
      // }
      // this.img = URL;
      // this.imgPreview = [URL]
      //我这里使用的是转bs64
      img2Base64(file.raw)
        .then((res) => {
          this.img = res
        })
        .catch((err) => {
          console.log(err);
        });
      console.log("文件上传", file);
    },
//图片转bs64的方法
      img2Base64 (file) {
      console.log(file);
      return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
      resolve(reader.result)
    };
    reader.onerror = function (error) {
      reject(error);
    };
  })
}

  // 图片删除时
    handleRemove (file, fileList) {
      console.log("删除", file, fileList);
      this.dialogImageUrl = [];
      this.fileList = [];
      console.log(" this.dialogImageUrl删除", this.dialogImageUrl);
    },
    handleChange (file, fileList) {
      // 当多余一个的时候替换文件
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    handleBannerSuccess (response, file, fileList) {
      console.log(response, file, fileList);
    },
    submitUpload () {
      this.$refs.upload.submit();
      this.handlePreview()
    },
    handlePreview (file) {
      console.log(file);
    },

.imageDivText {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.tableImgShow {
  width: 80px;
  height: 60px;
  object-fit: cover;  //关键代码  可以让图片沾满盒子 
}

附上图片占满盒子的css 样式链接 

CSS object-fit 属性 | 菜鸟教程