vue+vant图片上传压缩图片大小
可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件
其实这儿所说的压缩,就是图片重绘,改变图片大小
首先我们看一下代码：
//html<div class="upload"><van-uploader:after-read="onRead":before-read="beforeRead"v-model="fileList"accept='.jpg,.jpeg,.png,.bmp':max-count="2"/></div>//jsdata () {return {fileList: [], // 回显图片imagePath: [] // 上传图片路径}}methods: {dataURLtoFile (dataurl, filename) {// 将base64转换为file文件let arr = dataurl.split(',')let mime = arr[0].match(/:(.*?);/)[1]let bstr = atob(arr[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, {type: mime})},beforeRead (file) {// 上传之前检测图片类似返回true和false会影响到onRead函数let regex = /(.jpg|.jpeg|.png|.bmp)$/if (!regex.test(file.type)) {Toast('图片格式不支持上传')return false} else {return true}},onRead (file) {// 上传图片// 大于10MB的图片都缩小像素上传if (file.file.size > 10485760) {let canvas = document.createElement('canvas') // 创建Canvas对象(画布)let context = canvas.getContext('2d')let img = new Image()img.src = file.content // 指定图片的DataURL(图片的base64编码数据)img.onload = () => {canvas.width = 400 canvas.height = 300context.drawImage(img, 0, 0, 400, 300)file.content = canvas.toDataURL(file.file.type, 0.92) // 0.92为默认压缩质量let files = this.dataURLtoFile(file.content, file.file.name)const data = new FormData()data.append('file', files)data.append('code', this.applyNo)data.append('type', 'chat')apiUpload(data).then(res => {this.imagePath.push(res.data.reqUrl)Toast('上传成功')})}} else {//小于10M直接上传const data = new FormData()data.append('file', file.file)data.append('code', this.applyNo)data.append('type', 'chat')apiUpload(data).then(res => {this.imagePath.push(res.data.reqUrl)Toast('上传成功')})}},}
这样就可以完成图片的重绘了,到底该上传多大的文件还需要根据具体业务去调整代码里面的参数
如果觉得《vue+vant图片上传压缩图片大小》对你有帮助，请点赞、收藏，并留下你的观点哦！
