vant框架上传组件---上传身份证两面图片需求并且压缩图片质量，非压缩长宽—

场景

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>


<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>

vant框架上传组件---上传身份证两面图片需求并且压缩图片质量，非压缩长宽——商城项目相关推荐

ASP 化境上传组件上传不成功提示不允许操作
今天一个ASP项目发现化境上传组件上传BMP图片不成功,提示不允许操作,经查因为图片太大,以下解决方法: 在服务里关闭iis admin service服务找到window ...
elementui 上传七牛_element ui使用上传组件上传文件到七牛(qiniu-js)
博主正在重构博客中,刚开始时静态资源都是上传到本地服务器的,但这个项目博主最后打算真正上线运营的.索性就改进了下,把静态资源尽量放到云存储中,方便后续开发.这里把方法和遇到坑给记录下. 1.使用前提注 ...
LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）
1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件. HTML代码: <input type='button' id='selectFile' value='选择文件'> &l ...
h5结合vant框架，实现列表上拉加载下拉刷新
最近在做h5移动页面开发,并且需要用移动端android和ios将h5嵌进去.在开发过程中,使用了vant这个框架: vant文档:https://youzan.github.io/vant/#/zh ...
从零开始编写自己的C#框架（23）——上传组件使用说明
文章导航 1.前言 2.上传组件功能说明 3.数据库结构 4.上传配置管理 5.上传组件所使用到的类 6.上传组件调用方法 7.效果演示 8.小结 1.前言本系列所使用的是上传组件是大神July开发 ...
Asp.Net上传组件
Asp.Net上传组件上传功能在Web开发中经常用到,因此花点时间写了个简单的组件.组件支持以下功能: 1.支持文件存储节点分组,同一分组内的节点随机存储(默认),亦可自选择节点进行存储. 2.存储 ...
elementui 上传请求头_element-ui上传组件多个文件同时上传请求一次后台接口（前后端代码版）...
记录时间 2020年10月27日 22点38分前言在使用element-ui上传组件上传多个文件时,出现多个文件对应着多个请求,比如你要上传3个文件,那么将请求3个后台接口,这样会无形之中增加了后 ...
解决使用elementUI框架el-upload上传组件时session丢失问题
解决使用elementUI框架el-upload上传组件时session丢失问题参考文章: (1)解决使用elementUI框架el-upload上传组件时session丢失问题 (2)https: ...
vant weapp 多选上传图片_微信小程序结合vant weapp ui实现多图上传组件
微信小程序多图上传最近在写小程序的商品上传,为方便需要使用多张图片的上传的功能.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求创建了一个组件希望能够帮到大家效果图创建一个图片上传的p ...

vant框架上传组件---上传身份证两面图片需求并且压缩图片质量，非压缩长宽——商城项目

场景

前端代码

vant框架上传组件---上传身份证两面图片需求并且压缩图片质量，非压缩长宽——商城项目相关推荐

最新文章

热门文章