Vue-Uni-App小程序?qū)崿F(xiàn)身份證識別~
需求：實現(xiàn)一個身份證的識別功能！看下方圖片！
思路：（把用戶上傳的身份證圖片轉(zhuǎn)成base64請求接口發(fā)送給后端，后端返回對應的信息渲染到頁面上就行了！）
識別出來后
第一步：在components新建 image-uploader.vue 代碼如下：
<template>
<view class="uploader-container row wrap">
<view
class="upload-image-box"
v-for="(item, index) in fileList"
:key="index"
:style="{ width: previewWidth, height: previewHeight }"
>
<image
mode="widthFix"
class="img-preview"
:src="item.url"
:style="{ width: previewWidth, height: previewHeight }"
/>
<view
v-if="deletable"
class="close-icon row-center"
@click="deleteImage($event, index)"
>
<icon type="cancel" size="30" color="white" />
</view>
</view>
<view
ref="input"
class="uplader-upload row-center"
:style="{ width: previewWidth, height: previewHeight }"
@click="handleImage"
v-show="(fileList.length == 0 || mutiple) && fileList.length < maxUpload"
v-if="!useSlot"
>
<image
mode="widthFix"
class="img-preview"
:src="defaultImage"
:style="{ width: previewWidth, height: previewHeight }"
/>
<icon v-if="deletable" type="cancel" size="30" color="white" />
<!-- <view type="image" accept="image/*" class="uploader-input" /> -->
</view>
<view
class="uplader-upload-slot row-center"
@click="handleImage"
v-show="(fileList.length == 0 || mutiple) && fileList.length < maxUpload"
v-else
>
<slot></slot>
</view>
</view>
</template>
<script>
export default {
name: "uploader",
props: {
fileList: {
type: Array,
default: () => [],
},
// 默認不允許多選圖片
mutiple: {
type: Boolean,
default: false,
},
// 限制上傳文件數(shù)量
maxUpload: {
type: Number,
default: 1,
},
previewWidth: {
type: String,
default: "",
},
previewHeight: {
type: String,
default: "",
},
previewImage: {
type: String,
default: "",
},
// 是否可刪除
deletable: {
type: Boolean,
default: false,
},
// camera
camera: {
type: Boolean,
default: false,
},
useSlot: {
type: Boolean,
default: false,
},
},
data() {
return {
defaultImage: null,
inputId: "",
};
},
create() {},
mounted() {
this.defaultImage = this.previewImage;
this.inputId = "fileid" + "_" + Math.random() * 10;
var input = document.createElement("input");
input.id = this.inputId;
input.type = "file";
if (this.camera) {
input.setAttribute("capture", "camera");
}
input.style.display = "none";
input.className = "uploader-input";
input.accept = "image/*";
let that = this;
input.onchange = (event) => {
let file = document.getElementById(this.inputId);
let fileName = file.value;
let files = file.files;
if (fileName == null || fileName == "") {
} else {
if (files[0]) {
let reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(e) {
var data = e.target.result;
that.defaultImage = data;
that.$emit("after-read", data);
};
}
}
// var file = this.file.target.files[0];
// var reader = new FileReader();
// reader.readAsDataURL(file);
// reader.onload = function(e) {
// var data = e.target.result;
// me.imgbase = data;
// console.log('Base64', data);
// };
};
this.$refs.input.$el.appendChild(input);
},
methods: {
handleImage() {
let file = document.getElementById(this.inputId);
file.click();
},
deleteImage(e, index) {
this.$emit("delete", index);
},
},
};
</script>
<style lang="scss">
.uploader-container {
.upload-image-box {
position: relative;
margin-right: 8rpx;
margin-bottom: 8rpx;
.img-preview {
border-radius: 10rpx;
}
.close-icon {
position: absolute;
right: -20rpx;
top: -15rpx;
width: 40rpx;
height: 40rpx;
background-color: red;
border-radius: 50%;
z-index: 20;
}
}
.img-preview {
width: 100%;
}
.uplader-upload {
position: relative;
// background-color: #f7f8fa;
cursor: pointer;
.uploader-input {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
top: 0;
left: 0;
z-index: 10;
cursor: pointer;
}
}
.uplader-upload-slot {
position: relative;
min-width: 160rpx;
min-height: 160rpx;
.uploader-input {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
top: 0;
left: 0;
z-index: 10;
cursor: pointer;
}
}
}
</style>
第二步：在你需要的頁面注冊組件：代碼如下
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
<div class="box">
<Uploader :previewImage="card.url1"/>
</div>
效果如下
可以看見背景圖片已經(jīng)出來了！用戶點擊也可以選擇圖片了！
把圖片轉(zhuǎn)成base64
template
<div class="box">
<Uploader :previewImage="card.url1" @after-read="chooseImgFront" class="uploader"/>
</div>
圖片已經(jīng)轉(zhuǎn)成了base64的轉(zhuǎn)碼，這打印base64到控制臺!
chooseImgFront(e) {
console.log(e);
},
調(diào)用后端的接口，傳入base64，根據(jù)你們的需求來，接口不是活的
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
});
},
}
調(diào)用接口代碼：
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();
}
},
數(shù)據(jù)已經(jīng)請求過來了
接下來就是數(shù)據(jù)渲染，數(shù)據(jù)渲染就不寫了太簡單了，就是把數(shù)據(jù)保存到list[]里面然后{{}}就行了！文章來源：http://www.zghlxwxcb.cn/news/detail-499482.html
最終效果圖
文章來源地址http://www.zghlxwxcb.cn/news/detail-499482.html
到了這里，關(guān)于Vue-Uni-App小程序?qū)崿F(xiàn)身份證識別的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
