export function CompressPictures(file, quality = 0.2) {
    return new Promise((resolve) => {
        const reader = new FileReader() // 創(chuàng)建 FileReader
        reader.onload = ({
            target: {
                result: src
            }
        }) => {
            const image = new Image() // 創(chuàng)建 img 元素
            image.onload = async() => {
                const canvas = document.createElement('canvas') // 創(chuàng)建 canvas 元素
                canvas.width = image.width
                canvas.height = image.height
                canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height) // 繪制 canvas
                const canvasURL = canvas.toDataURL('image/jpeg', quality)
                const buffer = atob(canvasURL.split(',')[1])
                let length = buffer.length
                const bufferArray = new Uint8Array(new ArrayBuffer(length))
                while(length--) {
                    bufferArray[length] = buffer.charCodeAt(length)
                }
                const miniFile = new File([bufferArray], file.name, {
                    type: 'image/jpeg'
                })
                resolve({
                    file: miniFile,
                    origin: file,
                    beforeSrc: src,
                    afterSrc: canvasURL,
                    beforeKB: Number((file.size / 1024).toFixed(2)),
                    afterKB: Number((miniFile.size / 1024).toFixed(2))
                })
            }
            image.src = src
        }
        reader.readAsDataURL(file)
    })
}

使用示例

        // 開挖前圖片
        async beforeImgHandleChange(file) {
            const isIMG = ["image/jpeg", "image/jpg", "image/png"].includes(file.raw.type)
            const isLt1M = file.size / 1024 / 1024 < 10
            if (isIMG && isLt1M) {
                let res = await CompressPictures(file.raw, 0.2)
                let base64 = await this.getBase64(res.file)
                this.beforeExcavationImgUrl = base64
                this.form.beforeExcavationImgUrl = res.file
            } else {
                this.$message.warning('只能上傳jpg跟jpeg類型圖片，且大小不超過10M')
                return
            }
        },

引用自https://blog.csdn.net/u013938578/article/details/128762512