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

效果图

点击方框调取手机相册选取图片进行上传，后端识别身份证采用的是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;
}

 data: {//身份证photos: "../../images/user.png",photos2: "../../images/user.png",cardfront: false,cardcontrary: false,cardInfo: {},cardInfo2: {},},//选取身份证图片touchphoto: function (e) {var that = thisvar no = e.currentTarget.id;if (no == "1") {          //1，2判断的是身份证正反wx.chooseImage({       // 微信小程序选取手机图片的方法count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePathsthat.setData({photos: tempFilePaths})that.upLoadImg(tempFilePaths, '1')}})} else if (no == "2") {wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePathsthat.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.frontthat.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 = truewx.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}})}},

微信小程序之身份证照片正反上传相关推荐

小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
微信图片自动上传到服务器,微信小程序怎样使图片上传至服务器
这次给大家带来微信小程序怎样使图片上传至服务器,微信小程序使图片上传至服务器的注意事项有哪些,下面就是实战案例,一起来看一下.-wxml 发布项目 /**选择图片 */ choose: functio ...
微信小程序用户头像编辑上传
微信小程序用户头像编辑上传近期接触了一个小程序项目,需要可以修改用户头像,默认获取用户当前微信头像,点击头像,可调用手机照相机或者本地相册,更换图片. html代码如下: js代码:
微信小程序开发之文件上传下载应用场景（附Demo源码）
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
微信小程序云开发-批量上传文件到云储存空间
微信小程序开发自己最近在玩微信小程序,准备记录一些自己遇到的,网络上没有对应教程(也许是自己没找到),或者是教程比较少的问题,然后给出自己的解决方案目录微信小程序开发问题一.云储存是什么? ...
微信小程序java中文乱码_如何解决微信小程序显示中文无法上传或者出现乱码的问题？...
今天小编给大家讲解如何解决微信小程序显示中文无法上传或者出现乱码的问题?有需要或者有兴趣的朋友们可以看一看下文,相信对大家会有所帮助的. 在formData中对文字进行编码,使用encodeURI() ...
微信小程序云开发实现上传文件和预览下载文件
微信小程序云开发实现上传文件和预览下载文件一.前言目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...
小程序上传音频失败_微信小程序实现录音后上传文件方法详细
本篇文章讲述了微信小程序实现录音后上传文件方法,大家对微信小程序实现录音后上传文件方法不了解的话或者对微信小程序实现录音后上传文件方法感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 ...

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

微信小程序之身份证照片正反上传相关推荐

最新文章

热门文章