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>