一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

uni-app怎么实现文字识别OCR uni-app接入百度AI识别接口实战

时间:2026-06-17 09:52:47 编辑:袖梨 来源:一聚教程网

uni-app调用百度OCR必须经自有服务器中转,因百度强制校验Referer、Origin及access_token(需client_id+client_secret换取且不可暴露前端);后端需实现token缓存、图片转发与错误透传,并校验文件大小(≤4MB)和格式(jpg/jpeg/png/bmp)。

uni-app 调用百度 OCR 接口必须走自己服务器中转

直接在 uni-app 前端调用百度 AI 的 https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic 会失败——不是跨域问题,而是百度强制校验 RefererOrigin,且要求携带有效的 access_token,而该 token 必须用 client_id + client_secret 向百度后端换取,密钥绝不能暴露在前端。

所以真实链路是:uni-app → 你自己的后端接口(如 /api/ocr/baidu) → 百度 OCR 接口。这个后端必须完成:token 缓存、图片 base64 或二进制转发、错误透传。

  • 别试 uni.request 直连百度接口,必返回 {"error_code":110,"error_msg":"Access token invalid or no longer valid"}
  • token 有效期 30 天,但百度建议每 2 小时刷新一次并本地缓存,避免并发请求重复获取
  • 你的后端需校验上传文件大小(百度限制单图 ≤ 4MB)、格式(jpg/jpeg/png/bmp),否则直接返回错误,别让前端猜原因

uni-app 端如何安全上传图片给自己的 OCR 接口

用户拍照或选图后,不能直接把 tempFilePath 发过去——它只是本地临时路径。得先用 uni.uploadFile 上传二进制流,或手动读取为 base64(注意体积翻倍)。

推荐用二进制上传,更省流量、兼容性更好:

uni.uploadFile({  url: 'https://your-api.com/api/ocr/baidu',  filePath: tempFilePath,  name: 'image',  header: { 'Authorization': 'Bearer xxx' }, // 如需鉴权  success: (res) => {    const data = JSON.parse(res.data);    console.log(data.words_result); // 百度返回的识别结果数组  }});
  • name: 'image' 必须和你后端 req.files.image(Express)或 request.files['image'](Koa)字段名一致
  • 别用 uni.chooseImagesizeType: ['compressed'],压缩可能导致文字模糊,OCR 准确率断崖下跌
  • Android 上部分机型拍完照返回的 tempFilePathfile:// 协议,uploadFile 不支持,得先用 uni.getFileSystemManager().readFile 读成 base64 再发,或换用 uni.chooseMedia(uni-app 3.0+)

后端处理 OCR 请求时最容易漏掉的三件事

很多开发者卡在“明明 token 有了、图片传了,但百度返回空结果或 17/18 错误码”,大概率是后端没做这几步:

  • 百度要求 POST body 是 form-data,且图片字段必须叫 image(base64)或 file(二进制),不能是自定义名;若传 base64,值要带前缀 data:image/jpg;base64,xxx
  • 请求头必须加 Content-Type: multipart/form-data; boundary=xxxaxios 会自动设,但原生 fetch 不会),否则百度当无效请求
  • 百度对图片尺寸有隐式要求:宽高均需 ≥ 15px,≤ 8192px;长边 > 4096px 时可能截断,建议前端上传前用 uni.canvasToTempFilePath 或后端用 sharp 缩放,别硬传超大图

识别结果解析要注意中文标点和空格陷阱

百度 OCR 返回的 words_result 是按行返回的数组,每项含 words(字符串)和 location(坐标)。但实际文本里常混着全角空格、零宽空格、软回车,甚至识别错的“O”(全角字母 O)当成“0”。

  • 别直接 result.join('') 拼接,试试 result.map(i => i.words).join('n') 保留换行逻辑
  • 遇到“识别出一串乱码但坐标连贯”,大概率是图片倾斜或反光,百度没做矫正,得前端提示用户重拍
  • 如果业务需要结构化提取(比如发票号、金额),别依赖固定下标,用正则匹配 + location.left 辅助判断位置关系,比纯文本容错更强

OCR 不是黑盒魔法,输入质量、坐标理解、后处理规则,哪一环松动都会让结果偏移。尤其在低端安卓机上,预览画面变形、闪光灯干扰、焦距不准,这些物理层问题,代码再怎么写都兜不住。

热门栏目