OCR文字识别【前端渲染，后端进行逻辑处理】

水香木鱼

已于 2022-07-25 16:32:59 修改

阅读量4.5k

点赞数 5

分类专栏：后台管理系统文章标签： vue javascript OCR文字识别

于 2022-04-12 20:47:09 首次发布

陈春波

本文链接：https://blog.csdn.net/weixin_48337566/article/details/124133614

版权

后台管理系统专栏收录该内容

58 篇文章

订阅专栏

在这里插入图片描述

💌 作者简介

📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【前端领域创作者】😜
📜 CSDN 主页：水香木鱼
📑 个人博客：陈春波
🎨 系列专栏：后台管理系统
🌹 一键四连：关注 💋+点赞 👍+收藏 ⭐+留言 📝
📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。

莫西莫西,哈喽小伙伴们! 本期针对于前端开发中的 OCR 文字识别,为大家带来全新攻略一 👇

OCR 文字识别

通过图片上传(增值税发票、火车票等)进行文字识别

实现思路:前端将图片传给后端，后端进行逻辑处理后,把结果返回前端,前端进行页面内容渲染

注意:本次演示后端只返回文字内容,相关返回字段需要和后端去协商, 木鱼在这里，就不过多的去说明了

1、图片上传

<!--上传外层盒子-->
<div
  v-loading="loading"
  element-loading-text="拼命处理中"
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
>
  <!-- 图片上传 -->
  <el-upload
    class="upload-demo"
    drag
    :action="imagesUrl"
    :on-progress="onUploadProgress"
    :on-success="onUploadSuccess"
    :on-error="onUploadError"
    :show-file-list="false"
    multiple
    name="image"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">增值税上传图片</div>
  </el-upload>
</div>

2、参数说明:

action :必选参数，上传的地址 string 【关键代码】
on-progress: 文件上传时的钩子 event, file, fileList
on-success :文件上传成功时的钩子 response, file, fileList
on-error :文件上传失败时的钩子 err, file, fileList
show-file-list :是否显示已上传文件列表 true、false
multiple :是否支持多选文件 true、false
name :传给后端的(key 字段) image 【关键代码】

3、内容渲染

本次演示借助json-viewer 插件来展示内容

<p>结果详情</p>
<div>
  <!-- json 显示插件 -->
  <json-viewer :value="content" :expand-depth="4" copyable sort></json-viewer>
</div>

4、`json-viewer` 插件

下载插件:

npm install vue-json-viewer --save

页面内引入:

import JsonViewer from "vue-json-viewer";

页面内注册:

components: { JsonViewer },

5、业务层

<script>
  export default {
    data() {
      return {
        imagesUrl: 'http://172.132.XX.XX/abc',//接口地址
        content: "", //结果展示
        loading: false, //加载样式
      };
    },
    methods: {
      /*图像上传过程函数*/
      onUploadProgress() {
        this.loading = true; //loading效果
      },
      /*图像上传成功回调函数*/
      onUploadSuccess(res, file) {
        this.contents = "";
        this.content = res; //接口返回的数据
        this.loading = false; //loading效果
      },
      /*图像上传失败回调函数*/
      onUploadError() {
        Message.error("图像上传失败");
        this.loading = false; //loading效果
      },
    },
  };
</script>