上传【身份证】识别信息自动填充组件

太过爱你忘了你带给我的痛 2023-02-11 08:57 3阅读 0赞

效果如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]  
在components文件夹中添加组件，组件代码如下，直接复制即可使用，上传接口记得更改即可。  
![在这里插入图片描述][20200523111746567.png]

<template>
      <div >
        <el-form :model="form" label-width="160px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="身份证号:" style="margin-bottom: 15px !important;">
                <el-input v-model="form.idcard" class="input-with-select" placeholder="请输入或上传身份证">
                  <el-upload slot="append"
                             :headers="headers"
                             action="/admin/sys-file/upload"
                             multiple
                             :limit="1"
                             :file-list="[]"
                             :show-file-list="false"
                             :before-upload="beforeUpload"
                             :on-success="handleSuccess">
                    <el-button size="small" type="primary">上传身份证</el-button>
                  </el-upload>
                </el-input>
              </el-form-item>
              <el-form-item label="姓名:" style="margin-bottom: 15px !important;">
                <el-input v-model="form.name" class="input-with-select" placeholder="请输入姓名">
                  <el-button slot="append">一键调取</el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="性别:" style="margin-bottom: 15px !important;">
                <el-switch
                  v-model="form.sex"
                  active-text="女"
                  inactive-text="男">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="照片:">
                <MaterialList :onlyView="onlyShow" v-model="form.headImg" :value="form.headImg" style="width: 500px" type="image" :num=1 :width=200 :height=150></MaterialList>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="民族:">
                <el-select v-model="form.nation" placeholder="请选择民族">
                  <el-option
                    v-for="item in nationList"
                    :key="item.label"
                    :label='item.label'
                    :value="item.label"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期:">
                <el-date-picker
                  v-model="form.birthDay"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择出生日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="住址:">
                <el-input v-model="form.address" placeholder="请输入住址" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
    
    <script>
      import { getDicData } from '@/util/util'
      import store from '@/store'
    
      export default {
        name:'uploadCard',
        props: {
          form:{
            type: Object,
            default: function () {
              return {
                address:'',
                birthDay:'',
                headImg:[],
                nation:'',
                sex:false,
                name:'',
              }
            }
          }
        },
        data() {
          return {
            headers: {
              Authorization: 'Bearer ' + store.getters.access_token,
              //'TENANT-ID': '1581252647'
            },
            nationList:[],
            form:{
              address:'',
              birthDay:'',
              headImg:[],
              nation:'',
              sex:false,
              name:'',
            },
            onlyShow:false
          }
        },
        methods: {
          beforeUpload(file) {
            this.$message.warning("上传图片中，比较缓慢，请耐心等待。。。");
            let that=this;
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
              // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
              var imgcode = e.target.result;
              axios.post('/wbjk/wbjkdy/sfzocr', {base64: imgcode, type: "face"}).then(function (res) {
                var info=res.data.data;
                console.info(info);
                that.form.address=info.address;
                that.form.name=info.name;
                that.form.nation=info.nationality+"族";
                that.form.birthDay=info.birth;
                that.form.idcard=info.num;
                that.$message.success('自动填充完毕！')
                if(info.sex=='男'){
                  that.form.sex=false
                }else if(info.sex=='女'){
                  that.form.sex=true
                }
              })
            }
          },
          //上传图片成功
          handleSuccess(res, file, fileList) {
            this.$message.warning('读取身份证成功，自动填值中，请耐心等待。。。')
          }
        },
        mounted(){
          //民族
          getDicData({path: '/admin/syspublicdict/type/mz_type', data: []}).then(res => {
            if (res.data.data) {
              this.nationList = res.data.data;
            }
          })
          console.log(this.form)
        }
      }
    </script>
    
    <style scoped>
      .input-with-select button{
        color:#fff;
        background-color:#095AAE;
        height: 32px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    </style>

上传头像的地方，用了之前封装的图片素材库组件MaterialList ，详见[之前博客][Link 1]，也可以不使用，用el-upload也可以的。

然后在页面中调用组件

<uploadCard ref="uploadCard" :form="uploadCardForm"></uploadCard>
    
    data() {
                return {
                    uploadCardForm:{}
                    }
              }
    
    import uploadCard from '@/components/uploadCard/index'
    
    components: { uploadCard },

在需要拿到数据的地方通过ref的方式字组件向父组件传值的方式取值即可`console.log(this.$refs.uploadCard.form)`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200522181357587.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[20200523111746567.png]: https://img-blog.csdnimg.cn/20200523111746567.png
[Link 1]: https://blog.csdn.net/weixin_44770377/article/details/104845921