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-uploader
                v-model="applicant.idFrontFile"
                :after-read="afterRead('applicant.idFrontFile', 1)"
                :preview-full-image="false"
                max-count="1"
              >
                <template #default>
                  <img
                    src="@/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-uploader
                v-model="applicant.idBackFile"
                :after-read="afterRead('applicant.idBackFile', 2)"
                :preview-full-image="false"
                max-count="1"
              >
                <template #default>
                  <img
                    src="@/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>