需求:实现一个身份证的识别功能!看下方图片!
思路:(把用户上传的身份证图片转成base64请求接口发送给后端,后端返回对应的信息渲染到页面上就行了!)
import Uploader from "@/components/image-uploader.vue";
在export default 下面注册
components: {
Uploader
},
data card{}里面是放的背景图片!
data() {
return {
card: {
url1: "../../static/imgs/idcard1.jpg",
url2: "../../static/imgs/idcard2.jpg",
},
}
},
template
效果如下
可以看见背景图片已经出来了!用户点击也可以选择图片了!
把图片转成base64
template
图片已经转成了base64的转码,这打印base64到控制台!
chooseImgFront(e) {
console.log(e);
},
调用后端的接口,传入base64,根据你们的需求来,接口不是活的
import request from './http'
export default {
// 身份证正面识别接口
getIDCardFrontInfo(data) {
return request({
url: `blade-lhyg/user/user_staff/identity/frontBase64`,
method: 'POST',
data
});
},
// 身份证正面识别接口
getIDCardReverseInfo(data) {
return request({
url: `blade-lhyg/user/user_staff/identity/contraryBase64`,
method: 'POST',
data
});
},
// 身份认证
authentication(data) {
return request({
url: `blade-lhyg/user/user_staff/identity/authentication`,
method: 'POST',
data
});
},
}
调用接口代码:
async chooseImgFront(e) {
uni.showLoading({
title: "加载中",
mask: true,
});
try {
const { code, data } = await this.$api.certify.getIDCardFrontInfo({
phoneNo: this.$store.getters.phoneNo,
photo: e,
});
if (code === 200) {
Object.assign(this.form, data);
}
} catch (error) {
} finally {
uni.hideLoading();
}
},
接下来就是数据渲染,数据渲染就不写了太简单了,就是把数据保存到list[]里面然后{{}}就行了!