上传证件照片，自动识别证件上的文字信息， 并填充在适当的位置
！！不是广告！！
这种技术叫OCR文字识别
OCR（optical character recognition）文字识别是指电子设备（例如扫描仪或数码相机）检查纸上打印的字符，然后用字符识别方法将形状翻译成计算机文字的过程。
也就是对文本资料进行扫描，然后对图像文件进行分析处理，获取文字及版面信息的过程
像我们平时看到的上传身份证自动识别文字， 以及上传票据，识别信息， 自动填写，都是用的文字识别技术。
OCR技术产品： 合合信息， TextIn(合合下的)， 百度智能云，悦保科技
有兴趣的小伙伴可以自行研究一下，横向了解一下，对比之后 从设计角度看到不通方案适用的场景。
我选择的是 TextIn 产品， 他有个体验中心，可以先看到效果，再按需选择使用。
也有开放的集成api
总体感觉文章写的挺清晰明了的，免费试用的有1000张限额，如果只是作为了解测试，也够用了。
下面是我实现的效果，可以参考一下：
相关代码:
<template><div><el-upload class="upload-demo" action="//" :before-upload="before"><el-button size="small" type="primary" v-loading.fullscreen.lock="fullscreenLoading" class="mt20">点击上传</el-button></el-upload><el-card class="box-card mt20"><div slot="header" class="clearfix"><span>个人基本信息</span></div><p>证件类型: {{info.type_description}}</p><div v-for="(item, index) in info.item_list" :key="index"><p>{{item.description}}: {{item.value}}</p><!-- <img :src="'data:image/jpeg;base64,' + `${item.value}`" alt=""> --></div></el-card></div></template><script>import axios from 'axios'export default {data () {return {info: {},fullscreenLoading: false}},methods: {before (file) {this.fullscreenLoading = truevar that = thisvar reader = new FileReader()reader.readAsArrayBuffer(file) // 读取成二进制reader.onload = function (e) {var fileData = this.resultaxios.post('/robot/v1.0/api/id_card', fileData, {headers: {'x-ti-app-id': '911749fba5a76075774fdab8f14a165a','x-ti-secret-code': '348ddae947e609bcc48a8b7359834a90','Content-Type': 'application/octet-stream'}}).then((res) => {const {result, code } = res.datathat.fullscreenLoading = falseif (code === 200) {that.info = result}}, (err) => {console.log(err)}).catch((err) => {console.log(err.message)})}return false}}}</script><style>.mt20 {margin-top: 20px;}</style>
