VantUI 上传图片前进行压缩

// 大于1M的图片压缩
zipPic(file) {
    // 大于1MB的jpeg和png图片都缩小像素上传
    if (/\/(?:jpeg|png|jpg|bmp)/i.test(file.file.type) && file.file.size > 1024 * 1024) {
        // 创建Canvas对象(画布)
        let canvas = document.createElement('canvas')
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext('2d')
        // 创建新的图片对象
        let img = new Image()
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = file.content
        //画布宽度
        let width = 512
        let lastFile = null

        // 监听浏览器加载图片完成，然后进行绘制（this.promise为data中定义的一个参数）
        this.promise = new Promise((resolve, reject) => {
            img.onload = () => {
                //画布大小按照图片的比例生成
                let height = width / (img.naturalWidth / img.naturalHeight)
                // 指定canvas画布大小，该大小为最后生成图片的大小
                canvas.width = width
                canvas.height = height
                /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点， canvas.width, canvas.height 是将图片按给定的像素进行缩小。*/
                /* 如果不指定缩小的像素，图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后得到的图片就是张局部图。图片小于画布就会有黑边。*/
                context.drawImage(img, 0, 0, canvas.width, canvas.height)
                // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
                file.content = canvas.toDataURL(file.file.type, 0.92)
                //将base64编码的图片转成文件(file)格式
                lastFile = this.dataURLtoFile(file.content, file.file.name)
                resolve(lastFile);
            }
        });
    } else {
        return file.file
    }
},
// base64转file
dataURLtoFile: function(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 })
},
// 上传后
afterRead(file) {
    this.zipPic(file)
    // 由于onload为异步操作，需异步改同步加载
    this.promise.then((value) => {
        // 此处执行上传图片
    }).catch((error) => {
        // 提示错误
    })
},