|
|
- <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>
|