OCR文字识别【前端渲染,后端进行逻辑处理】_上传


💌 作者简介

  1. 📖 个人介绍:小伙伴们,大家好!我是水香木鱼,【​​前端领域创作者​​】😜
  2. 📢 人生箴言:即使没有万全准备,也要勇敢迈出第一步。

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

OCR 文字识别

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

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

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

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

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文字识别】​​,希望可以帮到大家,谢谢。