场景
1.vant框架上传组件—上传身份证两面图片需求并且压缩图片质量，非压缩长宽——商城项目
2.压缩图片质量大小——
3.压缩逻辑因为是正反两面单独压缩执行，所以我这里使用 Promise.all异步压缩完成后调用后台接口传递base64
前端代码
DOM
<template><div id="shop_address_edit"><van-address-editshow-set-default:area-list="areaList"@save="onSave"@change-default="changeM":address-info="address"/><!--身份证上传--><div id="uploaderID"><div class="uploaderBox"><van-uploaderv-model="sfzfileListzm"multiple:max-count="1"@delete="deleteAxiosimg"upload-text="身份证正面"/></div><div class="uploaderBox"><van-uploaderv-model="sfzfileListfm"multiple:max-count="1"upload-text="身份证反面"/></div></div></div></template>
js
<script>import {AddressEdit } from 'vant'import {Area } from 'vant'import Vue from 'vue'import axios from "axios"import allApi from '../js/request.js'import areaList from '../js/area'import publicFun from '../js/server.js'import {Toast } from 'vant';Vue.use(Toast);Vue.use(AddressEdit).use(Area);export default {name: "shop_address-edit",data(){return{areaList,address:{},sfzfileListzm:[],//身份证正面ZMBase64:'',//正面sfzfileListfm:[],//身份证反面FMBase64:'',//反面}},created(){let aid=this.$route.query.aid;if(aid){this.getAddress();}},methods:{/*获取回显*/async getAddress(){let aid=this.$route.query.aid;let self=this;await axios.post(allApi.GetAddress,{Data:aid}).then(function (res) {var a=res.data.Result;let addObj=a.area.split(',');let isDef=false;if(a.is_default==1){isDef=true;}// self.address={id:a.id,addressDetail:a.address,name:a.accept_name,tel:a.mobile,province:a.address,city:a.address,county:a.address};self.address={id:a.id,addressDetail:a.address,name:a.accept_name,tel:a.mobile,province:addObj[0],city:addObj[1],county:addObj[2],isDefault:isDef,areaCode:a.areaCode};if(res.data.Result.sfz_zm_Info!==null){self.sfzfileListzm=res.data.Result.sfz_zm_Info;//回显已上传身份证正面}if(res.data.Result.sfz_fm_Info!==null){self.sfzfileListfm=res.data.Result.sfz_fm_Info;//回显已上传身份证反面}// $("input[type='text']").attr('placeholder',addObj[0])}).catch(function (res) {console.log(res)});},/*保存*/onSave(content){/*异步压缩执行*/let self=thisPromise.all([this.ZMFile(this.sfzfileListzm), this.FMFile(this.sfzfileListfm)]).then(function (results) {console.log('成功')self.axiosimg(content)//调用接口});},changeM(index){console.log(index)},/*删除已上传的支付截图*/deleteAxiosimg(file){console.log('删除已上传的支付截图',file)},/*保存请求*/async axiosimg(content){let name=content.name;let phone=content.tel;let address=content.addressDetail;let txtProvince=content.province;let txtCity=content.city;let txtArea=content.county;let isDefault=0;if(content.isDefault){isDefault=1;}let aid=this.$route.query.aid;let id=this.$route.query.id;let my=this.$route.query.my;let order_no=this.$route.query.order_no;let self=this;let ZMBase64=this.ZMBase64;let FMBase64=this.FMBase64;// console.log(name,phone,txtProvince,txtCity,txtArea,address);var area=txtProvince+","+txtCity+","+txtArea;if(publicFun.checkAll(name,phone,area,address)){await axios.post(allApi.AddOrUpdateAddresses,{ID:aid,Address:address,Accept_Name:name,Mobile:phone,Area:area,Is_default:isDefault,ZMBase64:ZMBase64,FMBase64:FMBase64}).then(function (res) {if(res.data.IsSuccess==true){Toast.success('保存成功');setTimeout(function () {self.$router.push({path:'/shop_address_list',query:{id:id,my:my,order_no:order_no}});},1000)}else {Toast.fail(res.data.IsSuccess)}}).catch(function (res) {console.log(res)});}},/*压缩正面*/ZMFile(sfzfileListzm){var _this = this;return new Promise(function (resolve, reject) {/*判断是否有图片或者回显图*/if(sfzfileListzm.length>0){sfzfileListzm.forEach(function (item,key) {/*判断是否为回显图，ISImage为undefined则为新上传图*/if(item.isImage==undefined){// 选择的文件对象(file里只包含图片的体积，不包含图片的尺寸)var file = item.file;// console.log('key',key);// console.log(file)// 选择的文件是图片if(file.type.indexOf("image") === 0) {// 压缩图片需要的一些元素和对象var reader = new FileReader(),//创建一个img对象img = new Image();reader.readAsDataURL(file);//文件base64化，以便获知图片原始尺寸reader.onload = function(e) {img.src = e.target.result;};// base64地址图片加载完毕后执行img.onload = function () {// 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）var canvas = document.createElement('canvas');var context = canvas.getContext('2d');// 图片原始尺寸var originWidth = this.width;var originHeight = this.height;// 最大尺寸限制，可通过设置宽高来实现图片压缩程度var maxWidth = 600,maxHeight = 600;// 目标尺寸var targetWidth = originWidth,targetHeight = originHeight;// 图片尺寸超过300x300的限制if(originWidth > maxWidth || originHeight > maxHeight) {if(originWidth / originHeight > maxWidth / maxHeight) {// 更宽，按照宽度限定尺寸targetWidth = maxWidth;targetHeight = Math.round(maxWidth * (originHeight / originWidth));} else {targetHeight = maxHeight;targetWidth = Math.round(maxHeight * (originWidth / originHeight));}}// canvas对图片进行缩放canvas.width = targetWidth;canvas.height = targetHeight;// 清除画布context.clearRect(0, 0, targetWidth, targetHeight);// 图片压缩context.drawImage(img, 0, 0, targetWidth, targetHeight);/*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*///压缩后的图片转base64 url/*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';* qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/var ZMnewUrl = canvas.toDataURL('image/jpeg', 0.7);//base64 格式_this.ZMBase64=ZMnewUrl;resolve(//返回写函数里面你要执行的内容console.log('_this.ZMBase64',_this.ZMBase64))};} else {alert('请上传图片格式');}}else{resolve(//返回写函数里面你要执行的内容console.log('item.url',item.url))}});}else{resolve(//返回写函数里面你要执行的内容console.log('sfzfileListzm',sfzfileListzm))}})},/*压缩反面*/FMFile(sfzfileListfm){var _this = this;return new Promise(function (resolve, reject) {/*判断是否有图片或者回显图*/if(sfzfileListfm.length>0){sfzfileListfm.forEach(function (item,key) {/*判断是否为回显图，ISImage为undefined则为新上传图*/if(item.isImage==undefined){// 选择的文件对象(file里只包含图片的体积，不包含图片的尺寸)var file = item.file;// console.log('key',key);// console.log(file)// 选择的文件是图片if(file.type.indexOf("image") === 0) {// 压缩图片需要的一些元素和对象var reader = new FileReader(),//创建一个img对象img = new Image();reader.readAsDataURL(file);//文件base64化，以便获知图片原始尺寸reader.onload = function(e) {img.src = e.target.result;};// base64地址图片加载完毕后执行img.onload = function () {// 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）var canvas = document.createElement('canvas');var context = canvas.getContext('2d');// 图片原始尺寸var originWidth = this.width;var originHeight = this.height;// 最大尺寸限制，可通过设置宽高来实现图片压缩程度var maxWidth = 600,maxHeight = 600;// 目标尺寸var targetWidth = originWidth,targetHeight = originHeight;// 图片尺寸超过300x300的限制if(originWidth > maxWidth || originHeight > maxHeight) {if(originWidth / originHeight > maxWidth / maxHeight) {// 更宽，按照宽度限定尺寸targetWidth = maxWidth;targetHeight = Math.round(maxWidth * (originHeight / originWidth));} else {targetHeight = maxHeight;targetWidth = Math.round(maxHeight * (originWidth / originHeight));}}// canvas对图片进行缩放canvas.width = targetWidth;canvas.height = targetHeight;// 清除画布context.clearRect(0, 0, targetWidth, targetHeight);// 图片压缩context.drawImage(img, 0, 0, targetWidth, targetHeight);/*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*///压缩后的图片转base64 url/*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';* qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/var FMnewUrl = canvas.toDataURL('image/jpeg', 0.7);//base64 格式_this.FMBase64=FMnewUrl;resolve(//返回写函数里面你要执行的内容console.log('_this.FMBase64',_this.FMBase64))};} else {alert('请上传图片格式');}}else{resolve(//返回写函数里面你要执行的内容console.log('item.url',item.url))}});}else{resolve(//返回写函数里面你要执行的内容console.log('sfzfileListfm',sfzfileListfm))}});},},}</script>
css
<style scoped>#uploaderID{display: flex;margin-top: 10px;margin-left: 10px;}</style><style>#uploaderID .uploaderBox{width: 50%;}#uploaderID .van-uploader__preview-image{width: 100%!important;height: 150px!important;}#uploaderID .van-uploader__upload{width: 100%!important;height: 150px!important;}#uploaderID .van-uploader{width: 100%}#uploaderID .van-uploader__input{height: 100%;width: 100%;}#shop_address_edit .van-address-edit__buttons{position: absolute;bottom: 100px;width: 100%;}</style>
