Write a manual upload pictures of assembly, NA plug-ins, including restrictions on image size, format

1.html

 <ul class = "uploadUl"> 
       // li for the first echo images, picture after a successful upload interface to draw pictures echo through canvas. The second file uploads for selecting li 
        <li style = "the display: inline-Block" V- for = "(the src, index) in Files"> 
          <IMG = @ the Click "ImageToCanvas (the src)" class = 'preview' : the src = "the src"> 
          <IMG class = "Close" = @ the Click "Close (index, 0)" the src = "../../../../ static / IMG / closea.png">    / / close the layer 
        </ Li> 
        <Li style = "the display: inline-Block" class = "roomDiv" = @ the Click "chooseImg (0)" V- IF = "this.files.length <. 1"> 
          <INPUT type = 'file' name = "doc "
          <img class = "roomIMG" src = "../../../../ static / img / roomPaizhao.png">      // configure their own background image 
        </ li> 
 </ ul>

ImageToCanvas (Image) {
             // image drawing event, the method may share 
            the console.log (Image) 
            the let Canvas = document.createElement ( "Canvas" ); 
            canvas.width = image.width; 
            canvas.height = image.height; 
            Canvas .getContext ( "2D") the drawImage (image, 0, 0);. // 0, 0 parameter coordinate points on the canvas, the picture will be copied to place 
            return canvas; 
},

chooseImg (index) { 
  // upload pictures click event, you can pass parameters
   console.log (index) 
  IF (index === 0) { 
    the this $ refs.choose.click ();. 
  } the else IF (index === . 1) { 
    . refs.choose1.click the this $ (); 
  } 
},

// a packaging method 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)
  })
},

// Draw picture (function key)

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) 
  } 
}, 

the image before compression // upload plug 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 the Layer

Close (Val, index) { 
  // Photo close event 
  IF (index === 0) { 
    this.files.splice (Val,. 1); 
  } the else IF (=== index. 1) { 
    this.files1.splice (Val,. 1); 
  } 
},

Display of results: