微信小程序 上传身份证照片功能
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]
})
}
}
}
})
},