VUE element-ui之百度OCR证件识别，组件内证件照转码解码识别身份证照文字

步骤：

接上一篇博文继续完善获取access_token
封装Base64照片转码方法：

const identification = {
  // 将图片转为base64格式
  transformBase64(file) {
    return new Promise((resolve, reject) => {
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function(e) {
        resolve(e.target.result)
      }
    })
  },
  // carIdentify(ocrImg) {
  //   return new Promise((resolve, reject) => {
  //     var params = new FormData()
  //     params.append('image', ocrImg)
  //     params.append('detect_direction', true)
  //     params.append('vehicle_license_side', 'front')
  //     params.append('access_token', this.access_token)
  //     axios.post('/baiduApi/rest/2.0/ocr/v1/vehicle_license?access_token', params,
  //       { headers: { 'content-type': 'application/x-www-form-urlencoded' }}
  //     ).then((res) => {
  //       resolve(res.data.words_result)
  //     })
  //   })
  // }

}

export default identification

组件内引用：

import axios from 'axios'
import identification from '@/utils/identification'

定义请求百度OCR身份证识别方法：

methods: {
    // 身份证文字识别
    idCardIdentify(idCardImg) {
      return new Promise((resolve, reject) => {
        var params = new FormData()
        params.append('image', idCardImg)//转Base64后的编码
        params.append('id_card_side', 'back')//身份证正反面参数，正：front，反：back
        params.append('access_token', this.access_token)
        axios.post(
          '/baiduApi/rest/2.0/ocr/v1/idcard?', params,
          { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
        ).then((res) => {
          resolve(res.data.words_result)
        })
      })
    }
}

el-uplod组件中定义文件发生变化时的钩子：

<el-upload
    class="avatar-uploader"
    action="#"
    :auto-upload="false"
    :show-file-list="false"
    :on-change="changePictureUploadIDBack"
>
// 文件发生变化时的钩子
    changePictureUploadIDBack(file, fileList) {
      identification.transformBase64(file.raw).then(data => {//调用封装的base64转码方法
        console.log(`Base64---`, data)
        this.idCardIdentify(data).then(res => {//调用请求百度OCR身份证识别方法，将Base64传入
          console.log(`ocr识别----`, res)
        })
      })

点击上传身份证反面照片成功后：

可以看到直接识别出身份证上有效文字。

结合上一篇博文，到此纯前端调用百度在线接口识别身份证文字全部走通，本人亲自调试，可直接cv使用，希望可以帮助到您，记得送上您免费的赞。