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

💌 作者简介

1. 📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【前端领域创作者】😜

2. 📜 CSDN 主页：水香木鱼

3. 📑 个人博客：陈春波

4. 🎨 系列专栏：后台管理系统

5. 🌹 一键四连：关注 💋+点赞 👍+收藏 ⭐+留言 📝

6. 📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。

莫西莫西,哈喽小伙伴们! 本期针对于前端开发中的 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>

📖 博主致谢

感谢大家阅读到结尾，本次的文章就分享到这里，总结了【OCR文字识别】，希望可以帮到大家，谢谢。

如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛 您的支持就是我更新的最大动力。👇👇👇👇👇👇

🛩 往期精彩：

前端开发：颜色代码速查表【英文颜色、HEX 格式、RGB 格式】

前端实现 div 标签 p 标签等吸顶效果【Vue+原生 JS 组合写法】

vue后台管理做适配的最佳方案，你知道吗？

一文图解前端WebSocket 实时通信

vue实现隐藏浏览器右侧滚动条功能