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压缩图片的资料请关注毛票票其它相关文章!