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>