移动端上传图片压缩解决方法

1.前端开发时总是遇到要压缩图片的问题

前端的处理是 

通过把file 转换成 base64格式 然后再传给后端

第一种 前端把file  转换成 base64路径格式 直接传给后台，后台自己进行解码处理

第二种 前端把file  转换成 base64路径格式 ，然后再转换为file 格式（二进制格式）然后传给后台，后台按file处理

项目中遇到的是由于后台格式接受文件格式为file  "Content-Type": "multipart/form-data" 

所以前端用第二种处理

//压缩图片为Base64路径格式
const Base64 = (img) =>{
        let originWidth = img.width,
        originHeight=img.height,
        maxWidth = 1000, maxHeight = 1000,
        quality = 0.5, // 压缩质量
        canvas = document.createElement('canvas'),
        drawer = canvas.getContext("2d");
        canvas.width = maxWidth;
        canvas.height = originHeight/originWidth*maxWidth;
        drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
        let base64 = canvas.toDataURL("image/jpeg", quality); // 压缩后的base64图片
        //console.log(base64)
        let file = dataURLtoFile(base64,Date.parse(Date())+'.jpg');
        file={content:base64,file:file};
        return file
       
}
//把base64转file 二进制流
const dataURLtoFile = (dataurl,filename) =>{
    let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr],filename,{type:mime});
}
//上传时调用uploadImg即可
uploadImg(file){
       let img = new Image();
           img.src = file.content;
           img.onload=()=>{
             let file = this.Base64(img);
             this.uploaFile(file);
           }
}
uploaFile(file) {
  let formData = new window.FormData();
  formData.append('file', file.file);
  return axios.post('/upload',formData,{
    headers:{
      "Content-Type": "multipart/form-data"
    }
  })
}