vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
如下所示：
这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况，我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储，结合elementUI的el-upload组件实现图片上传功能（简单来说就是用户是老大）
1、提取出压缩方法，放在公共方法.js文件里
/**图片压缩，默认同比例压缩
*@param{Object}fileObj
*图片对象
*回调函数有一个参数，base64的字符串数据
*/
exportfunctioncompress(fileObj,callback){
try{
constimage=newImage()
image.src=URL.createObjectURL(fileObj)
image.onload=function(){
constthat=this
//默认按比例压缩
letw=that.width
leth=that.height
constscale=w/h
w=fileObj.width||w
h=fileObj.height||(w/scale)
letquality=0.7//默认图片质量为0.7
//生成canvas
constcanvas=document.createElement('canvas')
constctx=canvas.getContext('2d')
//创建属性节点
constanw=document.createAttribute('width')
anw.nodeValue=w
constanh=document.createAttribute('height')
anh.nodeValue=h
canvas.setAttributeNode(anw)
canvas.setAttributeNode(anh)
ctx.drawImage(that,0,0,w,h)
//图像质量
if(fileObj.quality&&fileObj.quality<=1&&fileObj.quality>0){
quality=fileObj.quality
}
//quality值越小，所绘制出的图像越模糊
constdata=canvas.toDataURL('image/jpeg',quality)
//压缩完成执行回调
constnewFile=convertBase64UrlToBlob(data)
callback(newFile)
}
}catch(e){
console.log('压缩失败!')
}
}
functionconvertBase64UrlToBlob(urlData){
constbytes=window.atob(urlData.split(',')[1])//去掉url的头，并转换为byte
//处理异常,将ascii码小于0的转换为大于0
constab=newArrayBuffer(bytes.length)
constia=newUint8Array(ab)
for(leti=0;i
2、el-upload上传组件
支持：.jpg.png.gif格式建议比例：16:9，小于10M
3、主要在handlePictureCardPreview方法里调用压缩方法
先在当前vue页面import公共js文件
import{compress}from'@/utils'
然后
//图片预览
handlePictureCardPreview(file){
const_that=this
constisLt10M=file.size/1024/1024<10
if(!isLt10M){
this.$message.error('上传图片大小不能超过10M!')
returnfalse
}else{
this.http://dh.wk163.comdialogImageUrl=URL.createObjectURL(file.raw)
compress(file.raw,function(val){
_that.theForm.picUrl=val
_that.imgFile=val
_that.showDelete=true
_that.$refs['addBuildingForm'].validateField('picUrl')
})
}
}
compress传入file.raw作为fileObj
这样只要上传图片就进行图片压缩
补充知识：elementupload限制上传图片尺寸、大小、比例
我就废话不多说了，大家还是直接看代码吧~
//上传前判断
publicasyncbeforeUpload(file:any){
constis1M=file.size/1024/1024<3;//限制小于3M
if(!is1M){
this.$message.error('图片尺寸限制最小为270x270，大小不可超过3MB，比例为1:1');
returnfalse;
}else{
constisSize=newPromise((resolve,reject)=>{
constwidth=270;
constheight=270;
const_URL=window.URL||window.webkitURL;
constimg=newImage();
img.onload=()=>{
constvalid=img.width>=width&&img.height>=height&&img.width===img.height;
valid?resolve():reject();
};
img.src=_URL.createObjectURL(file);
}).then(
()=>{
returnfile;
},
()=>{
this.$message.error('图片尺寸限制最小为270x270，大小不可超过3MB，比例为1:1');
returnPromise.reject();
},
);
returnisSize;
}
}
看了很多还不如自己撸一个
以上这篇vue+elementUI(el-upload)图片压缩,默认同比例压缩操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。