Vue使用vant上传组件上传图片并对大图压缩

HTML
  <Uploader
                :after-read="afterRead"
                accept=".jpg, .jpeg, .png, .bmp"
                max-count="8"
                multiple
                v-model="fileList"
                capture="camera"
                :before-read="beforeRead"
            />

afterRead(file) {
            // 大于1.5MB的jpeg和png图片都缩小像素上传
            if (/\/(?:jpeg|png)/i.test(file.file.type) && file.file.size > 100000) {
                // 创建Canvas对象(画布)
                let canvas = document.createElement('canvas')
                // 获取对应的CanvasRenderingContext2D对象(画笔)
                let context = canvas.getContext('2d')
                // 创建新的图片对象 
                let img = new Image()
                // 指定图片的DataURL(图片的base64编码数据)
                img.src = file.content
                // 监听浏览器加载图片完成，然后进行进行绘制
                img.onload = () => {
                    // 指定canvas画布大小，该大小为最后生成图片的大小
                    canvas.width = 400
                    canvas.height = 300
                    /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
                    如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
                    context.drawImage(img, 0, 0, 400, 300)
                    // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
                    file.content = canvas.toDataURL(file.file.type, 0.92)
                    // 最后将base64编码的图片保存到数组中，留待上传。
                    if (this.imgBase64.length < 8) {
                        this.imgBase64.push(file.content)
                        console.log(this.imgBase64)
                    } else {
                        alert("最多上传6张图片")
                    }
                }
            } else {
                // 不做处理的jpg和png以及gif直接保存到数组
                if (this.imgBase64.length < 8) {
                    this.imgBase64.push(file.content)
                    console.log(this.imgBase64)
                } else {
                    alert("最多上传6张图片")
                }
            }
        },



beforeRead(file) {
            let regex = /(.jpg|.jpeg|.png|.bmp)$/
            if (!regex.test(file.type)) {
                Toast('图片格式不支持上传')
                return false
            } else {
                return true
            }
        },

转载于:https://juejin.im/post/5c1890b1518825046c2f67b7