微客导航 » 文章资讯 » Vue+Element-UI实现上传图片并压缩

Vue+Element-UI实现上传图片并压缩

2023-08-07 10:13:05 169

Vue+Element-UI上传图片并压缩，供大家参考，具体内容如下

1.版本

Vue:2.5.2
Element-UI：2.12.0

可实现图片上传前，自动压缩。
Element-UI组件，详情见官网。

2.template部分

3.script部分

data(){
return{
//压缩质量
imgQuality:0.5,
imageUrl:''
}
methods:{
handleAvatarSuccess(res,file){
//服务器返回结果处理
},
dataURItoBlob(dataURI,type){
varbinary=atob(dataURI.split(',')[1]);
vararray=[];
for(vari=0;i{
constreader=newFileReader()
constimage=newImage()
image.onload=(imageEvent)=>{
constcanvas=document.createElement('canvas');
constcontext=canvas.getContext('2d');
constwidth=image.width*_this.imgQuality
constheight=image.height*_this.imgQuality
canvas.width=width;
canvas.height=height;
context.clearRect(0,0,width,height);
context.drawImage(image,0,0,width,height);
constdataUrl=canvas.toDataURL(file.type);
constblobData=_this.dataURItoBlob(dataUrl,file.type);
resolve(blobData)
}
reader.onload=(e=>{image.src=e.target.result;});
reader.readAsDataURL(file);
})
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue+Element-UI实现上传图片并压缩

热门推荐

随机推荐