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

Posted 2021-12-15 panax

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], 
    width: 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);
  
,

展示效果：