Vue移动端实现图片上传及超过1M压缩上传
本文实例为大家分享了Vue移动端实现图片上传及超过1M压缩上传的具体代码,供大家参考,具体内容如下
1、实现效果
2、代码
Html:
添加图片
本文实例为大家分享了Vue移动端实现图片上传及超过1M压缩上传的具体代码,供大家参考,具体内容如下
1、实现效果
2、代码
Html:
添加图片
Css:使用了less,需要引入less,才能使用(npminstalllessless-loader--save)
.choosePic{ margin:0.64rem0; .pics{ background-position:center; background-size:cover; width:15.1467rem; height:5.5467rem; background-color:#F9F9F9; border:2pxsolid#C3C3C3; display:flex; justify-content:center; align-items:center; font-size:1rem; color:#3DCA9A; font-weight:bold; border-radius:0.213rem; >div{ margin-left:0.213rem; letter-spacing:2px } .uploads{ position:absolute; z-index:99; left:0; width:99%; height:5.5467rem; opacity:0; } img{ width:1.4933rem; height:1.4933rem; } } }
JS:
/** *上传销售记录 */ uploadserpRecords(e){ letfile=e.target.files[0] if(file===undefined){ return } if(file.size/1024>1025){//文件大于1M(根据需求更改),进行压缩上传 that.photoCompress(file,{//调用压缩图片方法 quality:0.2 },function(base64Codes){ //console.log("压缩后:"+base.length/1024+""+base); letbl=that.base64UrlToBlob(base64Codes) //file.append('file',bl,'file_'+Date.parse(newDate())+'.jpg')//文件对象 that.uploadLice(bl)//请求图片上传接口 }) }else{//小于等于1M原图上传 this.uploadLice(file) } }, /** *base64转Blob格式和file格式 */ base64UrlToBlob(urlData){ letarr=urlData.split(','), mime=arr[0].match(/:(.*?);/)[1],//去掉url的头,并转化为byte bstr=atob(arr[1]),//处理异常,将ascii码小于0的转换为大于0 n=bstr.length, u8arr=newUint8Array(n) while(n--){ u8arr[n]=bstr.charCodeAt(n) } //转blob //returnnewBlob([u8arr],{type:mime}) letfilename=Date.parse(newDate())+'.jpg' //转file returnnewFile([u8arr],filename,{type:mime}) }, /* 压缩图片 file:文件(类型是图片格式), obj:文件压缩后对象width,height,quality(0-1) callback:容器或者回调函数 */ photoCompress(file,obj,callback){ letthat=this letready=newFileReader() /*开始读取指定File对象中的内容.读取操作完成时,返回一个URL格式的字符串.*/ ready.readAsDataURL(file) ready.onload=function(){ letre=this.result that.canvasDataURL(re,obj,callback)//开始压缩 } }, /*利用canvas数据化图片进行压缩*/ /*图片转base64*/ canvasDataURL(path,obj,callback){ letimg=newImage() img.src=path img.onload=function(){ letthat=this//指到img //默认按比例压缩 letw=that.width, h=that.height, scale=w/h w=obj.width||w h=obj.height||(w/scale) letquality=0.2//默认图片质量为0.7 //生成canvas letcanvas=document.createElement('canvas') letctx=canvas.getContext('2d') //创建属性节点 letanw=document.createAttribute('width') anw.nodeValue=w letanh=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值越小,所绘制出的图像越模糊 letbase64=canvas.toDataURL('image/jpeg',quality) //回调函数返回base64的值 callback(base64) } }, //返回file文件,调用接口执行上传 uploadLice(file){ console.log(file) uploadLog(file,(data)=>{ this.form.operatingLicense=data console.log(data) }) },
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。