<template>
|
|
<view class="idCard-box">
|
|
<view class="positive">
|
|
<image :src="upLoadPositiveImg == ''?positiveImg:upLoadPositiveImg" @tap.prevent="uploadPositive">
|
|
</image>
|
|
</view>
|
|
<view class="reverse">
|
|
<image :src="upLoadReverseImg == ''?reverseImg:upLoadReverseImg" @tap.prevent="uploadReverse">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 正面身份证
|
|
positiveImg: '',//自己图片路径
|
|
upLoadPositiveImg: '',
|
|
// 反面身份证
|
|
reverseImg: '', //自己图片路径
|
|
upLoadReverseImg: '',
|
|
baidu_token:' '//百度token
|
|
}
|
|
},
|
|
onLoad() {
|
|
// this.getACSS_TOKEN()
|
|
},
|
|
methods: {
|
|
// file文件转base64
|
|
getImageBase64(blob) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(blob);
|
|
reader.onload = () => {
|
|
const base64 = reader.result;
|
|
resolve(base64);
|
|
}
|
|
reader.onerror = error => reject(error);
|
|
});
|
|
},
|
|
// 身份证正面上传
|
|
uploadPositive() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['original', 'compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
this.upLoadPositiveImg = res.tempFilePaths[0]
|
|
this.getImageBase64(res.tempFiles[0]).then(res => {
|
|
this.uploadIdentify(res)
|
|
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 身份证反面上传
|
|
uploadReverse() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['original', 'compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
this.upLoadReverseImg = res.tempFilePaths[0]
|
|
this.getImageBase64(res.tempFiles[0]).then(res => {
|
|
this.uploadIdentify(res)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 获取百度token
|
|
getACSS_TOKEN() {
|
|
let that = this
|
|
uni.request({
|
|
// url: '/baiduApi/oauth/2.0/token',
|
|
url: 'https://aip.baidubce.com/oauth/2.0/token',
|
|
method: 'POST',
|
|
data: {
|
|
grant_type: 'client_credentials',
|
|
client_id: '你的',
|
|
client_secret: '你的',
|
|
},
|
|
header: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
success: res => {
|
|
this.baidu_token = res.data.access_token
|
|
}
|
|
});
|
|
},
|
|
// 上传识别
|
|
uploadIdentify(res) {
|
|
uni.request({
|
|
url: '/baiduApi/rest/2.0/ocr/v1/idcard?access_token=' + this.baidu_token,
|
|
method: 'POST',
|
|
data: {
|
|
image: res,
|
|
id_card_side: 'back' // 身份证 正反面 front:身份证含照片的一面 back:身份证带国徽的一面
|
|
},
|
|
header: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
success: res => {
|
|
console.log(res.data)
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.idCard-box {
|
|
margin-top: 100px;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: #fff;
|
|
|
|
.positive {
|
|
flex: 1;
|
|
height: 30%;
|
|
width: 30%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: red;
|
|
image {
|
|
width: 80%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.reverse {
|
|
flex: 1;
|
|
height: 30%;
|
|
width: 30%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: blue;
|
|
|
|
image {
|
|
width: 80%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|