无为清净楼资源网 Design By www.qnjia.com
需求:
上传到服务器的图片太大会导致服务器承受不了,故在前端传图片的时候将图片压缩后再传到服务器
直接上代码
async getRealName(){ let nickname = this.nickname.trim() let idnum = this.idnum.trim() let nameReg = /[\u4e00-\u9fa5]/gm let idnumReg = /^[a-z0-9]+$/i let zheng1 = document.getElementById("file1").files[0] let fan1 = document.getElementById("file2").files[0] if(nickname.length < 1) { return Toast('请输入姓名') } if(idnum.length < 1) { return Toast('请输入身份证号码') } if(!zheng1) { return Toast('请上传身份证信息页') } if(!fan1) { return Toast('请上传身份证国徽页') } 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(()=>{ let data = new FormData() data.append('nickname',nickname);//添加form表单中其他数据 data.append('idnum',idnum) data.append('zheng',this.zheng,zheng1.name) data.append("fan",this.fan,fan1.name) let apiauth = localStorage.getItem('apiauth') let config = { 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 var img = new Image(); if(statu == 'zheng') { img.src = _this.avatar1; }else { img.src = _this.avatar2 } img.onload = function(){ var that = this; //这里的this 是把img的对象指向改变为that // 默认按比例压缩 var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); var quality = 0.7; // 默认图片质量为0.7 //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 创建属性节点 var anw = document.createAttribute("width"); anw.nodeValue = w; var anh = 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值越小,所绘制出的图像越模糊 var base64 = canvas.toDataURL('image/jpeg', quality); // 回调函数返回base64的值 var urlFile = _this.convertBase64UrlToBlob(base64) //这个地方的处理是为了把压缩的base64转化为对象,获得压缩后图片的大小size,方便对压缩后的图片再次进行判断; // console.log(urlFile) let file = _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){ var arr = urlData.split(','), mime = arr[0].match(/:(.*".jpg", ".png"]; if(name) { var isNext = false; var fileEnd = name.substring(name.indexOf(".")); for (var i = 0; i < fileTypes.length; i++) { if (fileTypes[i] == fileEnd) { console.log(fileTypes[i]) isNext = true; this.disabled = false; this.formatImg = true; break; } } if (!isNext){ Toast('暂不支持该类型图片'); name = ""; this.disabled = true; this.formatImg = false return false; } } var reader = new FileReader() var that = this var image = new Image() reader.readAsDataURL(file) reader.onload = function(e) { that.avatar1 = this.result } } }, changeImg(event){ var file = event.target.files[0] var name = file.name var fileTypes = [".jpg", ".png"]; if(name) { var isNext = false; var fileEnd = name.substring(name.indexOf(".")); for (var i = 0; i < fileTypes.length; i++) { if (fileTypes[i] == fileEnd) { console.log(fileTypes[i]) isNext = true; this.disabled = false; this.formatImg = true; break; } } if (!isNext){ Toast('暂不支持该类型图片'); name = ""; this.disabled = true; this.formatImg = false return false; } } var reader = new FileReader() var that = this reader.readAsDataURL(file) reader.onload = function(event) { that.avatar2 = this.result } }
以上就是vue在图片上传的时候压缩图片的详细内容,更多关于vue 压缩图片的资料请关注其它相关文章!
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 陈洁丽《监听王NO.1 》示范级发烧天碟[WAV+分轨][1.1G]
- 单色凌.2014-小岁月太着急【海蝶】【WAV+CUE】
- 陈淑桦.1988-抱紧我HOLD.ME.NOW【EMI百代】【WAV+CUE】
- 黄妃.2020-色違【米乐士娱乐】【FLAC分轨】
- LouisHayes-ArtformRevisited(2024)[24Bit-96kHz]FLAC
- 永恒英文金曲精选5《TheBestOfEverlastingFavouritesVol.5》[WAV+CUE]
- 黑鸭子2005-紫丁香[首版][WAV+CUE]
- 林忆莲《爱上一个不回家的人》XRCD版[低速原抓WAV+CUE][999M]
- 经典《历届奥斯卡金曲回顾》[正版原抓WAV+CUE] [1G]
- 群星《试音草原·女声篇》经典蒙古民歌[WAV+CUE][1G]
- 炉石传说月末上分卡组推荐 国服月末最快上分卡组推荐
- 炉石传说月底最强卡组有哪些 2024国服月底最强卡组推荐
- 炉石传说月初最强卡组有哪些 2024月初最强上分卡组推荐
- 狼人杀亮相原生鸿蒙之夜 假面科技强势登陆华为生态
- 12小时光线挑战!AI画质专家才是大平层首选