vue在图片上传的时候压缩图片
需求：
上传到服务器的图片太大会导致服务器承受不了，故在前端传图片的时候将图片压缩后再传到服务器
直接上代码
asyncgetRealName(){
letnickname=this.nickname.trim()
letidnum=this.idnum.trim()
letnameReg=/[\u4e00-\u9fa5]/gm
letidnumReg=/^[a-z0-9]+$/i
letzheng1=document.getElementById("file1").files[0]
letfan1=document.getElementById("file2").files[0]
if(nickname.length<1){
returnToast('请输入姓名')
}
if(idnum.length<1){
returnToast('请输入身份证号码')
}
if(!zheng1){
returnToast('请上传身份证信息页')
}
if(!fan1){
returnToast('请上传身份证国徽页')
}
if(zheng1.size/1024>1025){
this.imgCompress(zheng1,{quality:0.2},'zheng')
}else{
this.zheng=zheng1
}
if(fan1.size/1024>1025){
this.imgCompress(fan1,{quality:0.2},'fan')
}else{
this.fan=fan1
}
setTimeout(()=>{
letdata=newFormData()
data.append('nickname',nickname);//添加form表单中其他数据
data.append('idnum',idnum)
data.append('zheng',this.zheng,zheng1.name)
data.append("fan",this.fan,fan1.name)
letapiauth=localStorage.getItem('apiauth')
letconfig={
headers:{'Content-Type':'multipart/form-data'},
herders:{apiauth:apiauth}
}
axios.post("http://api139.ys11.ipfsico.com/index/index/realname",data,config).then((res)=>{
Toast(res.data.msg)
if(res.data.code==1){
this.$router.replace({path:'/msite'})
}
})
},1000)
},
//图片压缩
imgCompress(path,obj,statu){
let_this=this//这里的this是把vue的实例对象指向改变为_this
varimg=newImage();
if(statu=='zheng'){
img.src=_this.avatar1;
}else{
img.src=_this.avatar2
}
img.onload=function(){
varthat=this;//这里的this是把img的对象指向改变为that
//默认按比例压缩
varw=that.width,
h=that.height,
scale=w/h;
w=obj.width||w;
h=obj.height||(w/scale);
varquality=0.7;//默认图片质量为0.7
//生成canvas
varcanvas=document.createElement('canvas');
varctx=canvas.getContext('2d');
//创建属性节点
varanw=document.createAttribute("width");
anw.nodeValue=w;
varanh=document.createAttribute("height");
anh.nodeValue=h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that,0,0,w,h);
//图像质量
if(obj.quality&&obj.quality<=1&&obj.quality>0){
quality=obj.quality;
}
//quality值越小，所绘制出的图像越模糊
varbase64=canvas.toDataURL('image/jpeg',quality);
//回调函数返回base64的值
varurlFile=_this.convertBase64UrlToBlob(base64)//这个地方的处理是为了把压缩的base64转化为对象，获得压缩后图片的大小size，方便对压缩后的图片再次进行判断；
//console.log(urlFile)
letfile=_this.blobToFile(urlFile,path.name)
console.log(file)
if(statu=='zheng'){
_this.zheng=file
}else{
_this.fan=file
}
if(urlFile.size/1024>1025){
Toast("图片过大，请重新上传图片")
}
}
},
convertBase64UrlToBlob(urlData){
vararr=urlData.split(','),mime=arr[0].match(/:(.*?);/)[1],
bstr=atob(arr[1]),n=bstr.length,u8arr=newUint8Array(n);
while(n--){
u8arr[n]=bstr.charCodeAt(n);
}
returnnewBlob([u8arr],{type:mime});
},
blobToFile(theBlob,fileName){
theBlob.lastModifiedDate=newDate();
theBlob.name=fileName;
returntheBlob;
},
changeImage(e){
console.log(e.target.files)
if(e.target.files[0]){
this.ownImg=false
varfile=e.target.files[0];
console.log(file)
letfilemaxsize=4096
letsize=file.size/1024
if(size>filemaxsize){
Toast('您上传的图片过大,请重新选择')
this.disabled=true;
this.formatImg=false
returnfalse
}
varname=file.name
varfileTypes=[".jpg",".png"];
if(name){
varisNext=false;
varfileEnd=name.substring(name.indexOf("."));
for(vari=0;i
以上就是vue在图片上传的时候压缩图片的详细内容，更多关于vue压缩图片的资料请关注毛票票其它相关文章！