input 上传多张图片

input上传视频(一)上传视频、并判断大小
canvas压缩图片(二)canvas压缩图片(二)

pc端上传图片，一张张的选太过麻烦，这里我们通过multiple属性便可以轻松搞定

<input 
	type="file" 
	accept="image/*" 
	@change="onFileChange('photoId')" 
	ref="photoId" 
	name="file1"
	class="btn"
	multiple="multiple"
/>

获取多张图片，进行处理

//获取图片
    async onFileChange(name) {
      let inputDOM = this.$refs[name];
      let files    = inputDOM.files;
			for(let i=0;i<files.length;i++){
				let  imageUrl = this.getObjectURL(files[i]);
				let src = await convertImgToBase64({url:imageUrl});
				this.arr.push({
					primary :{
						base64:src
					}
				});

				this.imgArr.push(src);
			}
      //重置value
      inputDOM.value = '';
		},

对图片进行压缩

convertImgToBase64 =(obj,Num) =>{ 
  Num = Num || 40;
  if(obj.type){
    let type = obj.url.split(';base64,')[0].split('data:image/')[1];
    if(type =='webp'){
      type = 'jpeg'
    }
    obj.type = type || 'jpeg';
  }
  
  obj.num  = obj.num  || 0.9;
  
  return new Promise(async (resolve)=>{
    var canvas = document.createElement('CANVAS'); 
    var ctx = canvas.getContext('2d'); 
    var img = new Image; 
    img.crossOrigin = 'Anonymous'; 
    img.src = obj.url; 
    img.onload = async()=>{
      var width  = img.width;
      var height = img.height;
      // 按比例压缩4倍
      canvas.width = width  * obj.num; 
      canvas.height = height*obj.num; 
      // ctx.fillStyle = "#fff";
      // ctx.fillRect(0, 0, canvas.width, canvas.height)
      ctx.drawImage(img,0,0,width,height,0,0,width*obj.num,height*obj.num); 
      var dataURL = canvas.toDataURL('image/'+obj.type,obj.num);
      // let num = parseFloat(obj.num-0.1);
      let num = obj.num;
      if(getImgSize(dataURL) >=Num && num>0){
        canvas = null;
        await  convertImgToBase64({url:dataURL,num ,type:obj.type},Num).then((res)=>{
          resolve(res)
        })
      } else{
        resolve(dataURL)
        canvas = null;
      }
    };
  })
}