vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
如下所示:
这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况,我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储,结合elementUI的el-upload组件实现图片上传功能(简单来说就是用户是老大)
1、提取出压缩方法,放在公共方法.js文件里
/**图片压缩,默认同比例压缩 *@param{Object}fileObj *图片对象 *回调函数有一个参数,base64的字符串数据 */ exportfunctioncompress(fileObj,callback){ try{ constimage=newImage() image.src=URL.createObjectURL(fileObj) image.onload=function(){ constthat=this //默认按比例压缩 letw=that.width leth=that.height constscale=w/h w=fileObj.width||w h=fileObj.height||(w/scale) letquality=0.7//默认图片质量为0.7 //生成canvas constcanvas=document.createElement('canvas') constctx=canvas.getContext('2d') //创建属性节点 constanw=document.createAttribute('width') anw.nodeValue=w constanh=document.createAttribute('height') anh.nodeValue=h canvas.setAttributeNode(anw) canvas.setAttributeNode(anh) ctx.drawImage(that,0,0,w,h) //图像质量 if(fileObj.quality&&fileObj.quality<=1&&fileObj.quality>0){ quality=fileObj.quality } //quality值越小,所绘制出的图像越模糊 constdata=canvas.toDataURL('image/jpeg',quality) //压缩完成执行回调 constnewFile=convertBase64UrlToBlob(data) callback(newFile) } }catch(e){ console.log('压缩失败!') } } functionconvertBase64UrlToBlob(urlData){ constbytes=window.atob(urlData.split(',')[1])//去掉url的头,并转换为byte //处理异常,将ascii码小于0的转换为大于0 constab=newArrayBuffer(bytes.length) constia=newUint8Array(ab) for(leti=0;i2、el-upload上传组件
支持:.jpg.png.gif格式建议比例:16:9,小于10M
3、主要在handlePictureCardPreview方法里调用压缩方法
先在当前vue页面import公共js文件
import{compress}from'@/utils'
然后
//图片预览 handlePictureCardPreview(file){ const_that=this constisLt10M=file.size/1024/1024<10 if(!isLt10M){ this.$message.error('上传图片大小不能超过10M!') returnfalse }else{ this.http://dh.wk163.comdialogImageUrl=URL.createObjectURL(file.raw) compress(file.raw,function(val){ _that.theForm.picUrl=val _that.imgFile=val _that.showDelete=true _that.$refs['addBuildingForm'].validateField('picUrl') }) } }
compress传入file.raw作为fileObj
这样只要上传图片就进行图片压缩
补充知识:elementupload限制上传图片尺寸、大小、比例
我就废话不多说了,大家还是直接看代码吧~
//上传前判断 publicasyncbeforeUpload(file:any){ constis1M=file.size/1024/1024<3;//限制小于3M if(!is1M){ this.$message.error('图片尺寸限制最小为270x270,大小不可超过3MB,比例为1:1'); returnfalse; }else{ constisSize=newPromise((resolve,reject)=>{ constwidth=270; constheight=270; const_URL=window.URL||window.webkitURL; constimg=newImage(); img.onload=()=>{ constvalid=img.width>=width&&img.height>=height&&img.width===img.height; valid?resolve():reject(); }; img.src=_URL.createObjectURL(file); }).then( ()=>{ returnfile; }, ()=>{ this.$message.error('图片尺寸限制最小为270x270,大小不可超过3MB,比例为1:1'); returnPromise.reject(); }, ); returnisSize; } }
看了很多还不如自己撸一个
以上这篇vue+elementUI(el-upload)图片压缩,默认同比例压缩操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。