element-ui 上传压缩图片

1. 编写上传组件

<el-upload ref="upload" 
    class="upload" 
    action="" 
    :on-change="handleChangeFile" 
    :auto-upload="false" 
    :file-list="form.fileList" 
    :limit="1"
 >
         <el-button size="small" type="primary">点击上传</el-button>
 </el-upload>

2. 拿到file上传文件并压缩

handleChangeFile(param) {
    /**
    * 这里我封装了一个组件 挂载全局
    * 先转成base64 -------> 然后canvas压缩  -----> 然后转回file文件上传服务器
    * @param {Object} param.raw ----> 上传的文件
    * @param {Number} 0.7 ----> 压缩比例
    * @param {Function} (base64) => ----> 返回成功的回调函数
    **/
    this.$htmlToCanvas.getBase64(param.raw, 0.7, (base64) => {
        // 把base64转file文件
        const file = this.$htmlToCanvas.base64ImgtoFile(base64);
        // 这里拿到压缩后的file文件 可自行上传到服务器
    })
}

3. 公用方法

// base64 转 file文件
base64ImgtoFile(dataurl, filename = 'file') {
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let suffix = mime.split('/')[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
    })
}

// file文件转base64并压缩图片
getBase64(raw,quality,callback) {
    const reader = new FileReader();
    reader.readAsDataURL(raw);
    reader.onload = function(readRes) {
        // 压缩图片
        let img = new Image();
        img.setAttribute('crossOrigin','anonymous');
        img.src = readRes.target.result;
        img.onload = function() {
            let canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0,img.width,img.height);
            const dataUrl = canvas.toDataURL('image/jpeg', quality)
            callback(dataUrl)
        }
    }
}