微信小程序 上传身份证照片功能

微信小程序 上传身份证照片功能

image.png

// wxml
<view class="id-card-box">
    <view class="card-text">
      <view class="card-text-1">身份证正面</view>
      <view class="card-text-2">上传您身份证人像面</view>
    </view>
    <view class="card-img" bindtap="openPhotoes" data-type="zheng">
      <image wx:if="{{zhengPhoto}}" src="{{zhengPhoto}}" class="img-100-100" mode="aspectFit"></image>
      <image wx:else src="../../images/id_car_1@2x.png" class="img-100-100"></image>
      <!-- 拍照不需要授权<button wx:if="{{isNeedSettingButton}}" class="open" open-type="openSetting"
        bindopensetting="getCameraSetting">相机授权</button>-->
    </view>
  </view>

// js
data : {
    // 证件照片
    whichClick: '', // zheng fan
    zhengPhoto: '',
    fanPhoto: '',
}
...
  // 打开相机和相册
  // actionSheet (e) {
  //   let _this = this
  //   let whichClick = e.target.dataset.type
  //   console.log('which click:', whichClick)
  //   this.setData({
  //     whichClick: whichClick
  //   })
  //   wx.showActionSheet({
  //     itemList: ['从手机相册选择', '拍照'],
  //     success: function(res) {
  //       console.log(res.tapIndex)
  //       _this.openPhotoes()
  //     },
  //     fail: function(res) {
  //       console.log(res.errMsg)
  //     }
  //   })
  // },
  // 打开相册 这里就可以直接打开相机或相册
  openPhotoes (e) {
    let _this = this
    if (e) {
      let whichClick = e.currentTarget.dataset.type
      console.log('which click:', whichClick, e)
      this.setData({
        whichClick: whichClick
      })
    }
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表
        console.log('res:', res)
        if (Array.isArray(res.tempFilePaths) && res.tempFilePaths.length > 0) {
          if (_this.data.whichClick === 'zheng') {
            _this.setData({
              zhengPhoto: res.tempFilePaths[0]
            })
          } else {
            _this.setData({
              fanPhoto: res.tempFilePaths[0]
            })
          }
        }
      }
    })
  },