要点：OCR文字识别 图片上传

在最近的项目中遇到需要进行OCR识别，中间遇到的坑记录一下

OCR接口：采用百度OCR通用文字识别

在进行调试过程中遇到下列问题:

百度ocr接口1.对图片经行base64 位转码且不要头部data：base这些标识

2.转码以后要进行必须经行encodeURI（）转换

3.头部必须为

header: {                'content-type': 'application/x-www-form-urlencoded'              },

下面正式介绍小程序开发过程遇到的坑：

文字识别肯定要上传图片，微信提供的接口为

wx.uploadFile({      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址      filePath: tempFilePaths[0],      name: 'file',      formData:{        'user': 'test'      },      success: function(res){        var data = res.data        //do something      }

因为小程序端暂时无法进行图片转base64 所以进行图片上传在后端转base64；

在实际开发中，这一块很抗，微信端也没给出官方说明；

首先是 name属性里面图片二进制数据无法获取，然后测试formData也无法获取，查资料后，对formData数据上传前进行encodeURI（）转换，之后后端进行解码可以获得数据；

但是上传的图片还是获取不到，各种查资料后发现，图片上传小程序采用的是

header: {            'content-type': 'multipart/form-data'          },

这种头部，属于一种特殊的表单提交，这时候就看不同语言后端怎么处理了。

数据处理完以后能够正常显示，但是上传图片太大会出现413错误；

这个问题是服务器设置问题，修改了两个地方，具体的可以自己去百度。

然后就是调用百度OCR接口，以这张图片为例：

返回数据为：

location:{width: 294, top: 179, height: 79, left: 155}words:"格蓝迪"

 

数据里面会有文字在图片上的位置，高度等信息

这时候你就可以操作这些信息在图片上显示：让文字带有边框等，加上边框后如图：

 

大致流程就这样，稍后为大家更一篇wx:for修改样式和具体怎么框这些文字。