vant+vue 上传身份证正面和反面 Ocr识别校验反显

页面：

代码：

//1 用vant的上传组件实现上传入口
//下面是否必传校验此处注释了，按需使用<!-- 上传身份影像组件 --><div class="upload_ocr_upload"><div class="upload_ocr_upload_box"><!-- :rules="[{ required: true, message: '请上传身份证正面' }]" --><van-field label="上传证件" name="idFrontFile"><template #input><van-uploaderv-model="applicant.idFrontFile":after-read="afterRead('applicant.idFrontFile', 1)":preview-full-image="false"max-count="1"><template #default><imgsrc="@/assets/images/face/preIdFImg.png"alt=""style="width: 110px; height: 80px"/></template></van-uploader></template></van-field></div><div class="upload_ocr_upload_box"><!-- :rules="[{ required: true, message: '请上传身份证反面' }]" --><van-field name="idBackFile"><template #input><van-uploaderv-model="applicant.idBackFile":after-read="afterRead('applicant.idBackFile', 2)":preview-full-image="false"max-count="1"><template #default><imgsrc="@/assets/images/face/preIdBImg.png"alt=""style="width: 110px; height: 80px"/></template></van-uploader></template></van-field></div></div>//data中声明
data:{isShowID: false,imageList: [],newOCRXT: true, // 嵌入新ocr系统标识businessNo: "", // ocr系统业务号imageList: [],applicant:{idFrontFile:[],idBackFile:[],beneWay:"",//证件有效期 1-非长期  0-长期applicantName:"",//证件姓名applicantIdentityId:"",//身份证号applicantAddress:"",//证件地址applicantEndID:"",//证件止期
}
}//methods中事件methods：{// 上传身份证afterRead(fileList, type) {return async (file) => {this[fileList] = [];//注释--imageCompress写在js文件中的，根据import引入，代码在下面file.file = await imageCompress(file.file);if (this.newOCRXT) {let fd = new FormData();fd.append("file", file.file);this.$loading("识别中...");//注释--getOCR为识别接口，根据接口路径，自行封装，参数按需修改const { code, msg, data } = await getOCR({params: fd,query: {type: type == "1" ? "0" : "1",serviceNo: this.businessNo,},});this.$cls();if (code !== "0000") {return this.$notify_err(msg);}//正面if (type == 1) {if (!data.name || !data.idcard) {return this.$notify_err("请上传正确的证件信息");} else {//获取到身份证信息  绑定到对应数据上即可this.applicant.applicantName = data.name;this.applicant.applicantIdentityId = data.idcard;this.applicant.applicantAddress = data.address;this[fileList] = [file];this.isShowID = true;}//反面} else {// console.log("上传了背面");let urlP = {name: this.applicant.applicantName,cardNumber: this.applicant.applicantIdentityId,cardType: "1",};//这一步拿到身份证号的有效期  截取出截止日期let resDate = data.closeDate;let dataNow = new Date();let resDateStr =resDate.substring(0, 4) +"-" +resDate.substring(4, 6) +"-" +resDate.substring(6, 8);this.applicant.applicantEndID = resDateStr;if (resDate.indexOf("长期") > -1 ||new Date(resDateStr) > new Date(dataNow)) {//注释--getOcrOssUrl为回显接口，根据接口路径，自行封装，参数按需修改getOcrOssUrl(urlP).then((resOCR) => {if (resOCR.code !== "0000") {return this.$notify_err(resOCR.msg);}// 正面this.uploadParams(1, resOCR.data[0].imageUrl);// 反面this.uploadParams(2, resOCR.data[1].imageUrl);this[fileList] = [file];this.isShowID = true;});} else {return this.$notify_err("证件有效期有误");}}} else {var paramsObj = {file: file.file,type: type == 1 ? "第二代身份证" : "第二代身份证背面",channel: this.$route.query.Channel,};var params = new FormData();Object.keys(paramsObj).forEach((attr) => {params.append(attr, paramsObj[attr]);});this.$loading("识别中...");//注释--uploadToOss为影像上传oss接口 按需引用封装const { data } = await uploadToOss(params);this.$cls("识别中...");console.log(data);if (!data) {this.$notify_err("影像不符合规范，请检查图片是否清晰，如果确认无误仍上传失败，请联系客服：8880231");return;}//正面if (type == 1) {if (!data.idCard.idNumber || !data.idCard.name) {return this.$notify_err("请上传正确的证件信息");} else {this.applicant.applicantName = data.idCard.name;this.applicant.applicantIdentityId = data.idCard.idNumber;this[fileList] = [file];this.isShowID = true;}//反面} else {console.log("上传了背面");var resDate = data.idCard.validity.replace(/[. -]/g, "");if (resDate.indexOf("长期") > -1 || resDate) {this[fileList] = [file];this.isShowID = true;} else {return this.$notify_err("证件有效期有误");}}this.uploadParams(type, data.imageUrl);}};},// 上传参数uploadParams(type, imageUrl) {let pamasImg = {type,imageUrl,};if (this.imageList.length > 0) {for (let i = 0; i < this.imageList.length; i++) {if (this.imageList[i].type == type) {this.imageList.splice(i, 1);}}}this.imageList.push(pamasImg);},
}//引入的js文件中写了图片压缩的方法
我是js文件：{
/*** * @param {Blob|base64Data} file 图片数据 * @param {Number} maxSize 文件最大字节控制* @description 图片压缩处理*/export const imageCompress = function (file, maxSize = 1024 * 500) {console.log(file);if (!file.size) {file = base64ToFile(file);}let ratio = Number(((maxSize * 0.8) / file.size).toFixed(2));let img = new Image();let name = file.name;let canvas = document.createElement('canvas');let compompressCount = 1;let ctx = canvas.getContext('2d');let handler = function (file) {return new Promise((res, rej) => {console.log(file.size, maxSize);if (file.size <= maxSize) {res(file);} else {ratio = Number((maxSize / file.size).toFixed(2));console.log(ratio);img.src = URL.createObjectURL(file);img.onload = function () {canvas.width = this.width;canvas.height = this.height;if (compompressCount > 1) {canvas.width = this.width * (1 / compompressCount * 1.8);canvas.height = this.height * (1 / compompressCount * 1.8);}compompressCount++;ctx.drawImage(this, 0, 0, canvas.width, canvas.height);res(handler(base64ToFile(canvas.toDataURL("image/jpeg", ratio), name)));};}});};return handler(file);
}
}//上传框样式
<style lang='less' scoped>.upload_ocr_upload {display: flex;justify-content: space-between;.upload_ocr_upload_box {text-align: center;.van-uploader__preview-image {width: 110px !important;height: 80px !important;}}.van-cell {padding-left: 0px;padding-right: 0px;}
}
</style>

vant+vue 上传身份证正面和反面 Ocr识别校验反显相关推荐

vant框架上传组件---上传身份证两面图片需求并且压缩图片质量，非压缩长宽——商城项目
场景 1.vant框架上传组件-上传身份证两面图片需求并且压缩图片质量,非压缩长宽--商城项目 2.压缩图片质量大小-- 3.压缩逻辑因为是正反两面单独压缩执行,所以我这里使用 Promise.all ...
上传身份证照片js_国际快递为什么需要上传身份证，怎么上传？
因为涉及到个人信息,我被问到了好多关于上传身份证的问题,现在慧子帮你一一解答,如果没有完全解答您的问题,可以微信私聊- 问题1:为什么国际快递需要上传身份证件? 问题2:上传身份证安全么? 问题3:怎 ...
上传身份证照片js_js上传身份证正反面
图片生成 * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; } body { font-size: 12px; ...
记录element-ui自定义表单验证上传身份证正反面
大概是这个样式两个上传组件写在一个form-item里进行自定义表单验证每次验证,通过判断上传组件绑定的值进行判断,callback不同的提示错误 <template><div& ...
element自定义表单验证上传身份证正反面的实现
效果图 <template> <div> <el-form :model="personalForm" :rules=&quo ...
vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件其实这儿所说的压缩,就是图片重 ...
微信小程序，上传身份证图片
小程序上传身份证图片,前端页面效果图话不多说,直接上代码 wxml <view class="ID-mian"><view class="card- ...
ionic上传身份证正反面照片、上传图片、FileReader使用（赞、实用）
原文出处:https://blog.csdn.net/qq_34645412/article/details/76162569 项目笔记: 有借鉴有自己的理解. 思路:上传图片首先需要获取到显示图片的 ...
ionic上传身份证正反面照片、上传图片、FileReader使用
项目笔记: 有借鉴有自己的理解. 思路:上传图片首先需要获取到显示图片的div的DOM节点,然后监听input的值,当input的值发生变化的时候,就将input的这个值插进div里面显示. 1.获取 ...
网上申请流量卡要上传身份证吗，这种情况安全吗？
在网上免费申请流量卡需要填写什么资料?需要上传身份证吗?相信这些问题都是大家比较关注的问题,接下来,小编给大家详细地介绍一下. 在网上申请流量卡时,需要填写一些申请信息,比如:姓名.身份证号.手机号. ...

vant+vue 上传身份证正面和反面 Ocr识别校验反显

vant+vue 上传身份证正面和反面 Ocr识别校验反显相关推荐

最新文章

热门文章