微信小程序证件照正反面上传

效果图

WXML

<view class="ID-mian">
       <view class="card-cont">
         <view class="card-list">
            <image src='{{photos}}' id="1" bindtap='touchphoto' mode='aspectFit'></image>
            <view class="text">请上传身份证正面</view>
         </view>
         <view class="card-list">
            <image src='{{photos2}}' id="2" bindtap='touchphoto' mode='aspectFit'></image>
            <view class="text">请上传身份证反面</view>
         </view>
       </view>
     </view>

WXSS

.card-cont{
  display: flex;
  flex-direction: column;
}
.card-list {
  margin: 0 auto;
}
.text{
  width: 100%;
  height: 50rpx;
 text-align: center;
font-weight: bold;
}

JS

Page({

  /**
   * 页面的初始数据
   */
  data: {

    //身份证
    photos: "../../assets/images/shangchuan.png",
    photos2: "../../assets/images/shangchuan.png",
  },
   //上传身份证
  touchphoto: function (e) {
    var that = this
    var no = e.currentTarget.id;
    if (no == "1") {
      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, 'card_user')
        }
      })
    } 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, 'card_guohui')
        }
      })
    } 
  },


  upLoadImg: function (list, type) {
    var that = this;
    this.upload(that, list, type);
  },

  //多张图片上传
  upload: function (page, path, type) {
    var that = this;
    var curImgList = [];
    for (var i = 0; i < path.length; i++) {
      wx.showToast({
        icon: "loading",
        title: "正在上传"
      }),
        wx.uploadFile({
          url: 填写你的接口,  //接口处理
          filePath: path[0],
          name: 'files',
          header: { "Content-Type": "multipart/form-data" },
          formData: {
            douploadpic: '1',
            token: _KMJH_Data.duoguan_user_token
          },
          success: function (res) {


            var imgdata = JSON.parse(res.data);
            //从json对象中创建JavaScript对象

            if (type == 'card_user') {
              that.setData({
                card_user: imgdata.savename
              })
            } else if (type == 'card_guohui') {
              that.setData({
                card_guohui: imgdata.savename
              })
            } else if (type == 'card_hand') {
              that.setData({
                card_hand: imgdata.savename
              })
            }

            if (res.statusCode != 200) {
              wx.showModal({
                title: '提示',
                content: '上传失败',
                showCancel: false
              })
              return;
            }
            var data = res.data

            page.setData({  //上传成功修改显示头像
              src: path[0]
            })
          },
          fail: function (e) {
            wx.showModal({
              title: '提示',
              content: '上传失败',
              showCancel: false
            })
          },
          complete: function () {
            wx.hideToast();  //隐藏Toast
          }
        })
    }
  },

  onLoad: function (options) {
    var that = this
    // that.getusercard();
  },
  
})