VUE利用 element-ui的上传图前的压缩图片到4M之内

VUE利用 element-ui的上传图前的压缩图片到4M之内

<el-upload
	class="avatar-uploader"
	action="123"
	:http-request="upload"//自定义上传接口
	:show-file-list="false"
	:before-upload="beforeAvatarUpload">//利用before-upload上传前的操作进行压缩
</el-upload>

在VUE项目下创建一个 js文件

export const compress = (file) => {
        return new Promise((resolve, reject) => {
        	//判断上传的格式
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
            }；
            //console.log(file.size)
            let isLt2M = file.size / 1024 / 1024 > 4 // 判定图片大小是否小于4MB
            let image = new Image(), resultBlob = '';
            image.src = URL.createObjectURL(file);
            image.onload = () => {
                // 调用方法获取blob格式，方法写在下边
                if(file.size / 1024 / 1024 < 4){
                    console.log('小于4M')
                }else{
                    resultBlob = compressUpload(image, file);//压缩的图片
                    //console.log(resultBlob)
                }
                resolve(resultBlob)
            }
            image.onerror = () => {
                reject()
            }
        })
}

  /* 图片压缩方法-canvas压缩 */
function  compressUpload(image, file) {
                
    let canvas = document.createElement('canvas')
    let ctx = canvas.getContext('2d')
    let initSize = image.src.length
    let { width } = image, { height } = image
    canvas. width = width
    canvas.height = height
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.drawImage(image, 0, 0, width, height)
    
    let i = 1;
    while (i>0.1) {
        let compressData = canvas.toDataURL(file.type || 'image/jpeg' || 'image/png',Number(i.toFixed(2)))
        // 压缩后调用方法进行base64转Blob，方法写在下边
        let blobImg = dataURItoBlob(compressData) 
    
        if(blobImg.size/1024/1024 < 4 ){
            return blobImg
        }
       //根据想要压缩到的大小进行压缩 0-1之间
        if(blobImg.size/1024/1024 > 10){i-= 0.1}
         if((blobImg.size/1024/1024 < 10) && (blobImg.size/1024/1024 > 8) ){i-= 0.06}
         if((blobImg.size/1024/1024 < 8) && (blobImg.size/1024/1024 > 6) ){i-= 0.03}
         if((blobImg.size/1024/1024 < 6) && (blobImg.size/1024/1024 > 5 )){i-= 0.02}
         if((blobImg.size/1024/1024 < 5) && (blobImg.size/1024/1024 > 4) ){i-= 0.01}
    }
}

/* base64转Blob对象 */
function dataURItoBlob(data) {
    let byteString;
    if(data.split(',')[0].indexOf('base64') >= 0) {
        byteString = atob(data.split(',')[1])
    }else {
        byteString = unescape(data.split(',')[1])
    }
    let mimeString = data
        .split(',')[0]
        .split(':')[1]
        .split(';')[0];
    let ia = new Uint8Array(byteString.length)
    for( let i = 0; i < byteString.length; i += 1) {
        ia[i] = byteString.charCodeAt(i)
    }
   
    return new Blob([ia], {type: mimeString})
}

使用方法

//在VUE的script中引入决赛文件
<script>
 import {compress} from '../../utils/reduce'
 	methods：{
	 beforeAvatarUpload(file) {
              return compress(file) //吧file传入就可以了
          },
}
 </script>

上传后压缩到小于4M的 然后提交后台就OK了！！！