手动写一个上传图片的组件，不适用插件，包括限制图片大小，格式

1.html

<ul class="uploadUl">
        // 第一li用于回显图片，上传接口图片成功后通过canvas进行绘制回显图片。 第二个li 用于选择文件上传
        <li style="display: inline-block" v-for="(src,index) in files">
          <img @click="ImageToCanvas(src)" class='preview' :src="src">
          <img class="close" @click="close(index,0)" src="../../../../static/img/closea.png">   // 关闭图层
        </li>
        <li style="display: inline-block" class="roomDiv" @click="chooseImg(0)" v-if="this.files.length<1">
          <input type='file' name="doc" ref="choose" accept="image/*"  @change='setImagePreview($event,0)' hidden/>  //hidden,隐藏原始的丑陋的input type='file'
          <img class="roomIMG" src="../../../../static/img/roomPaizhao.png">     // 自行配置背景图片
        </li>
 </ul>

ImageToCanvas(image) {
            // 图片绘制事件，此方法可共用
            console.log(image)
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.getContext("2d").drawImage(image, 0, 0);//0, 0参数画布上的坐标点，图片将会拷贝到这个地方
            return canvas;
},

chooseImg(index) {
  // 上传图片的点击事件，可传参
  console.log(index)
  if(index === 0){
    this.$refs.choose.click();
  }else if(index === 1){
    this.$refs.choose1.click();
  }
},

// 封装一个方法upIMGAjax

upIMGAjax(fileList,imgIndex){
  // 上传图片的路径和id
  console.log(fileList)
  const that = this ;
  let formData = new FormData();
  formData.append('file', fileList)
  let use = sessionStorage.getItem('userName') ;
  formData.append('uploadUserId', use)
  this.uploadFileRequest('',formData).then(res =>{
    if(res.data.code === 200){
       if(imgIndex === 0){
         that.roomImgId = res.data.data.id ;
         that.roomImgUrl = res.data.data.path ;
         sessionStorage.setItem("roomImgId", res.data.data.id);
         console.log(that.roomImgId,'roomId')
       }
       else if(imgIndex === 1){
         that.IDimgId = res.data.data.id ;
         that.IDimgUrl = res.data.data.path ;
       }
       
    }else{
       that.$Toast(res.data.message);
    }
  }).catch(res => {
    // console.log(res)
  })
},

// 图片绘制 (关键函数)

setImagePreview(event,index) {
  // 图片的绘制
  const that = this ;
  if(index === 0){
    this.file.push(event.target.files[0])    // e.target.files[0] 目标文件，固定files不能变名字。
    this.files.push(window.URL.createObjectURL(event.target.files[0]))
    let filess = event.target.files || event.dataTransfer.files
    if (this.files.length === 0) return;
    this.createImage(filess, event);
    this.upIMGAjax(event.target.files[0],0)
  }else if(index === 1){
    this.file1.push(event.target.files[0])
    this.files1.push(window.URL.createObjectURL(event.target.files[0]))
    let filess = event.target.files || event.dataTransfer.files
    if (this.files1.length === 0) return;
    this.createImage(filess, event)
    this.upIMGAjax(event.target.files[0],1)
  }
},

// 上传之前的图片的压缩插件lrz

createImage(file, event) {
  // 图片的压缩
  let _this = this
  this.lrz(file[0], {
     100,
    quality: .5
  }).then(function (rst) {
    _this.file.push(rst.base64)
    return rst;
  }).always(function () {
    event.target.value = null;
  })
},

// 关闭图层

close(val,index) {
  // 上传图片的关闭事件
  if(index === 0){
    this.files.splice(val, 1);
  }else if(index === 1){
    this.files1.splice(val, 1);
  }
},

展示效果：