应用canvas缩小照片提交的方式示例

<input type="file" id="fileys" class="fileys" @change="uploadFile($event)" accept="image/*"/>
<!--uploadFile用change是由于。客户将会会反复选别的照片-->

uploadFile:function(event){
let file = event.target.files[0]; //获得input的照片file值
let param = new FormData(); // 建立form目标
if(param.getAll('file')[0] == "undefined"){
        return false        //分辨是否空
      }
      
 let reader = new FileReader() 
  reader.readAsDataURL(file) //载入文档并将文档以URL的方式储存在resulr特性中 base64文件格式 ，，，在网上文本文档仿佛要求了文件格式。。我就选了1个base64
  
  
  reader.onload = function(e) { // 文档载入进行时开启  
      let result = e.target.result // base64文件格式照片详细地址  
      var image = new Image()
      image.src = result // 设定image的详细地址为base64的详细地址  
      image.onload = function(){  
        var canvas = document.getElementById("canvas");  
        var context = canvas.getContext("2d");  
        canvas.width = image.width; // 设定canvas的画布宽度为照片宽度  
        canvas.height = image.height; 
        context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘图照片  
        let dataUrl = canvas.toDataURL('image/jpeg', 0.001) //设定缩小比，可依据必须设定，设定太小会危害照片品质,dataUrl 为缩小后的照片資源，可将其提交到服务器  
  let tupian =  _this.dataURLtoFile(dataUrl, file.name)
        param.append('file', tupian);//对应后台管理接受照片名 

        //随后这里便可以写axios方式。去将这个param提交到后台管理

           } 
       } 
  
}