微客导航 » 文章资讯 » Vue移动端实现图片上传及超过1M压缩上传

Vue移动端实现图片上传及超过1M压缩上传

2023-08-04 02:01:03 385

本文实例为大家分享了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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue移动端实现图片上传及超过1M压缩上传

热门推荐

随机推荐