微信小程序之身份证照片正反上传

效果图

点击方框调取手机相册选取图片进行上传，后端识别身份证采用的是orc识别

<view class="certification">
  <view class="submit">请拍摄本人身份证</view>
  <view class="condition">1、支持大陆二代身份证</view>
  <view class="condition">2、请确保身份证在有效期内</view>
  <!-- 拍照上传 -->
  <view class="ID-mian">
    <view class="card-cont">
      <view class="card-list">
        <image src='{{photos2}}' id="2" bindtap='touchphoto' mode='aspectFit'></image>
        <view class="text">请上传身份证正面(国徽面)</view>
      </view>
      <view class="card-list">
        <image src='{{photos}}' id="1" bindtap='touchphoto' mode='aspectFit'></image>
        <view class="text">请上传身份证反面</view>
        <view>
          姓名：{{cardInfo.name}}
        </view>
        <view>身份证号：{{cardInfo.cardNum}}</view>
      </view>
    </view>
  </view>
</view>

wxss

.certification {
  padding: 35rpx;
  box-sizing: border-box;
  min-height: 100vh;
}

.submit {
  font-size: 42rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.condition {
  font-size: 35rpx;
  margin-bottom: 20rpx;
}

.card-cont {
  height: 500rpx;
  display: flex;
  flex-direction: column;
}

.card-list {
  margin: 0 auto;
}
.card-list image{
  width: 700rpx;
  height: 300rpx;
  margin-top: 10rpx;
}

.text {
  width: 100%;
  height: 50rpx;
  text-align: center;
  font-weight: bold;
 margin: 20rpx 0;
}

js

 data: {
    //身份证
    photos: "../../images/user.png",
    photos2: "../../images/user.png",
    cardfront: false,
    cardcontrary: false,
    cardInfo: {},
    cardInfo2: {},
  },
  //选取身份证图片
  touchphoto: function (e) {
    var that = this
    var no = e.currentTarget.id;
    if (no == "1") {          //1，2判断的是身份证正反
      wx.chooseImage({       // 微信小程序选取手机图片的方法
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          var tempFilePaths = res.tempFilePaths
          that.setData({
            photos: tempFilePaths
          })
          that.upLoadImg(tempFilePaths, '1')
        }
      })
    } else if (no == "2") {
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          var tempFilePaths = res.tempFilePaths
          that.setData({
            photos2: tempFilePaths
          })
          that.upLoadImg(tempFilePaths, '2')
        }
      })
    }
  },
  upLoadImg: function (list, type) {
    var that = this;
    this.upload(that, list, type);
  },
  //图片上传
  upload: function (page, path, type) {
    var that = this;
    for (var i = 0; i < path.length; i++) {
      wx.showToast({
          icon: "loading",
          title: "正在上传"
        }),
        wx.uploadFile({
          url: `${baseUrl}/verify/realNameAuth`, //接口处理
          filePath: path[0],
          name: 'files',
          header: {
            'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
            'Authorization': wx.getStorageSync('token') || "",
          },
          formData: {
            cardType: type,
          },
          success: function (res) {
            var imgdata = JSON.parse(res.data);
            console.log(res.data)
            if (imgdata.code == 0) {
              wx.showModal({
                title: '提示',
                content: '识别成功',
                showCancel: false
              })
              // 识别成功下面的代码可以供参考，需求不同
              //这里是通过返回的字段判断正反面是否全部上传，全部上传之后isCertification为true，页面才会展示列表，代表实名认证成功
              if (imgdata.result.front) {
                getApp().globalData.userInfo = imgdata.result.front
                that.setData({
                  cardInfo: imgdata.result.front, // 反面信息
                  cardcontrary: true
                })
              } else {
                that.setData({
                  cardInfo2: imgdata.result.back, // 正面信息
                  cardfront: true
                })
              }
              if (that.data.cardcontrary && that.data.cardfront) {
                getApp().globalData.isCertification = true
                wx.showModal({
                  title: '提示',
                  content: '实名认证成功',
                  showCancel: false
                })
                wx.reLaunch({
                  url: '../first/first',
                })  // 成功后返回首页
              } else {
                getApp().globalData.isCertification = false
              }
              console.log(getApp().globalData.isCertification, 888)
            } else {
              wx.showModal({
                title: '提示',
                content: '上传失败',
                showCancel: false
              })
              return;
            }
          },
          fail: function (e) {
            console.log('上传失败')
            wx.showModal({
              title: '提示',
              content: '上传失败',
              showCancel: false
            })
          },
          complete: function () {
            wx.hideToast(); //隐藏Toast
          }
        })
    }
  },