contract-front/pages/views/payment.uvue

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