vue 上传图片时压缩大小——image-conversion

1、安装模块

npm i image-conversion --save

2.引入imageConversion, 进行压缩

在需要用到图片压缩的地方，引入imageConversion

//in CommonJS
const imageConversion = require('image-conversion')
//in ES6
import * as imageConversion from 'image-conversion'
or
import { compress, compressAccurately } from 'image-conversion'

3、实现

方法一：压缩到指定大小

beforeAvatarUpload (file) {
    console.log(filel)
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isJpgOrPng) {
        this.$message.error('上传头像图片只能是JPG或PNG格式')
        return false
    }
    if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过2MB')
        return false
    }
    return new Promise((resolve) => {
        // 压缩到100KB,这里的100就是要压缩的大小，可自定义
        imageConversion.compressAccurately(file, 100).then((res) => {
            resolve(res)
        })
    })
}

按照一定质量倍数进行压缩

以质量为0.6进行压缩

return new Promise((resolve) => {
    imageConversion.compress(file, 0.6).then((res) => {
        resolve(res)
    })
})