vue里图片压缩上传组件
//单图上传 <template> <div> <div class="uploader" v-if='!dwimg'> <van-uploader :after-read="ondwRead" accept="image/gif, image/jpeg" multiple> <van-icon name="photograph" /> </van-uploader> </div> <p v-if="dwimg" class="img"><img id="img" :src="dwimg" alt="" @click='yltp(dwimg)'><b @click='htp'><van-icon name="close" /></b></p> </div> </template> <script> import axios from 'axios' import { Toast } from 'vant'; import { ImagePreview } from 'vant'; import hbsp from '@/components/rwlctbcons/hbsp' var instance = axios.create({ headers: {'Content-Type': 'multipart/form-data'} }); export default { name:'hbsp', data(){ return{ imgmurl:'', dwimg:'', } }, methods:{ //传值给父组件 父组件监听v-on:dantuEvent='function()'用function接收 childhbdbimg(){ console.log('1111'); this.$emit('dantuEvent',this.dwimg) }, //删除 htp(){ this.dwimg=''; }, //预览图片 yltp(dwimg){ ImagePreview([ dwimg ]); }, ondwRead(file){ Toast.loading({ duration: 0, mask: true, forbidClick: false, message: '上传中...' }); //console.log(file.content); console.log(file);//未压缩的file let img = new Image(); img.src = file.content; this.dwimg=file.content; let that=this; img.onload=function(){ that.ontpys(img); } //上传成功的图片 function fn(){ setTimeout(() => { if(that.imgmurl){ that.dwimg= that.imgmurl; console.log(that.dwimg); that.imgmurl=''; that.childhbdbimg(); Toast.clear(); }else{ fn(); } }, 1000); }; fn(); }, //压缩图片的方法 ontpys(img){ let originWidth = img.width, // 压缩后的宽 originHeight=img.height, maxWidth = 400, maxHeight = 400, quality = 0.8, // 压缩质量 canvas = document.createElement('canvas'), drawer = canvas.getContext("2d"); canvas.width = maxWidth; canvas.height = originHeight/originWidth*maxWidth; drawer.drawImage(img, 0, 0, canvas.width, canvas.height); let base64 = canvas.toDataURL("image/jpeg", quality); // 压缩后的base64图片 let file = this.dataURLtoFile(base64,Date.parse(Date())+'.jpg'); file={content:base64,file:file}; console.log(file);//压缩后的file this.onimg(file); }, //base64转file dataURLtoFile(dataurl,filename){ let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr],filename,{type:mime}); }, //图片上传 onimg(file){ //console.log(file.content) var formData = new FormData(); formData.append("file", file.file); instance({ url:'/api/img/upload', method:'post', headers: { 'token': sessionStorage.token }, data:formData }) .then(response=>{ console.log(response) this.imgmurl=response.data.url; }) .catch(error=>{ console.log(error) }) }, } } </script> <style scoped> .rwlctb_div{ padding: 10px 20px; line-height: 26px; } .tb_rwt span{ display: inline-block; width: 100%; } .tb_rwt{ padding: 10px 20px; } .tb_rwt span{ display: inline-block; width: 100%; } .tb_title{ text-align: center } .van-panel{ margin-top: 10px; } .van-row{ text-align: center } .van-uploader{ width:1.4rem; border:1px solid #999; text-align: center; height: 1.4rem; line-height: 1.4rem; } .img{ width:1.4rem; border:1px solid #999; text-align: center; height: 1.4rem; line-height: 1.4rem; overflow: hidden; position: relative; } .img img{ width: 100%; } .img i{ position: absolute; top: 1px; right: 1px; z-index: 11; } </style>
记录生活中的点点滴滴!