1、安装插件
npm install --save image-conversion
2、引入插件
import { compressAccurately } from 'image-conversion' //按需引入
3、在图片上传之前对图片进行压缩
/** 在图片上传前before-upload钩子函数 */
handleBeforeUpload(file) {
// 注意这里需要用Promise函数来阻止图片没有压缩好,就直接将文件上传
return new Promise(async (resolve, reject) => {
const isJPG = file.type === 'image/jpeg';
const isPng = file.type === 'image/png';
const imgType = file.type
const imgName = file.name
// 每个限制返回错误信息 都需要用到reject()
if (!isJPG && !isPng) {
this.$message.warning('上传图片只能是 JPG 或者 PNG 格式!');
return reject(false); //注意这里需要用reject来返回错误的信息,防止图片自动上传
}
let compress = 2048 // 假设图片限制不能大于2M
let sizeOver = file.size / 1024 > compress; //文件大小 是否大于指定大小
if (sizeOver && compress) { //大于2M进行压缩
const res = await compressAccurately(file, {
size: compress, //需要压缩的大小
accuracy: 0.9, //精度 0.8-0.99之间 默认值0.95
type: 'image/jpeg',
width: 105,
height: 105,
orientation: 2,
scale: 0.5,
});
file = res; //把得到的新的图片文件赋值给原文件,然后进行上传 得到的是bold对象
file = new window.File([file], imgName, {type: imgType}) //将bold对象转换为file文件
}
resolve(true) // 通过resolve将Promise函数返回成功回调,进行后面操作
})
}
插件github地址: https://github.com/WangYuLue/image-conversion
