关于vue 使用百度ocr识别行驶证

1.登录地址

获取access_token

由于vue的axios请求百度ocr识别接口会出现跨域问题可以使用代理解决(vue 2.0 和 vue3.0 解决如下)

1.vue 2.0 proxyTable 代理解决：在config目录下的index.js文件中添加如下配置即可

// An highlighted block
module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: './',proxyTable: {'/baiduApi': {target: 'https://aip.baidubce.com', //访问地址changeOrigin: true,secure: false, //只有代理https 地址需要次选项pathRewrite: {'^/baiduApi': ''}}},

vue 3.0 proxy代理解决：在vue.config.js文件中的devServer中添加如下配置即可

// An highlighted block
proxy: {'/baiduApi': {target: 'https://aip.baidubce.com', //访问地址changeOrigin: true,secure: false, //只有代理https 地址需要次选项pathRewrite: {'^/baiduApi': ''}}},

这个只能本地线上用nginx代理

location ~ ^/(baiduApi)/.* {rewrite  ^.+baiduApi/?(.*)$ /$1 break;include  uwsgi_params;root   /usr/share/nginx/html;proxy_pass https://aip.baidubce.com;}

经过配置代理后即可请求获取access_token的接口

this.axios.get('/baiduApi/oauth/2.0/token?grant_type=client_credentials&client_id=iBlglRY8dh8HyKXBwgOkyn6H&client_secret=32uqmGIdHqjCK1xk7L7U2D7RcrBRkVRG&',{headers:{dataType:'json'}}).then(res =>{if(res.status ==200){this.access_token = res.data.access_token;}})

在 el-upload的 on-change事件中写入转化base64

1.promise封装将图片转base64

   //将图片转为base64格式transformBase64(file){return new Promise(((resolve, reject) => {var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function(e){ resolve(e.target.result)}}))},

2.promise封装请求百度OCR行驶证识别
链接: 百度OCR行驶证识别接口文档.

carIdentify(ocrImg){return new Promise(((resolve, reject) => {var params = new FormData();params.append('image',ocrImg);params.append('detect_direction', true );params.append('vehicle_license_side', 'front' );params.append("access_token", this.access_token);axios.post("/baiduApi/rest/2.0/ocr/v1/vehicle_license?access_token",params,{headers: {'content-type': 'application/x-www-form-urlencoded'} }).then((res)=>{resolve(res.data.words_result)})}))},

3.在 el-upload 的 on-change事件中请求上面两个 promise请求

  uploadImg(file,fileList){this.transformBase64(file.raw).then(data=>{this.carIdentify(data).then(res=>{console.log(res)})})},

关于vue 使用百度ocr识别跨域问题相关推荐

vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
百度地图api 跨域
百度地图调用参考:逆地理编码 rgc 反geo检索 | 百度地图API SDK axios ,jsonp 参考:使用VUE的axios解决调用百度地图api的跨域访问问题_樱小诺的博客-CSDN博客 ...
【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
uni-app之接入百度OCR识别身份证(微信小程序版本)
本文为uni-app接入百度OCR识别身份证号,话不多说,直接上代码: 1. 第一步注册百度智能云账号,选择文字识别,创建应用,获取Api Key 与 Secret Key(下面要用到): 2.第二步 ...
vue项目打包部署nginx跨域
vue项目打包部署nginx跨域 vue项目连接外部api接口时,打包部署到nginx后出现api404,api跨域问题,这个时候需要给vue项目本身进行跨域,再配置nginx中进行跨域即可解决,详见 ...
记录在小程序中前端调用百度 Ocr 识别身份证信息
微信小程序因为业务扩展需要用户身份证信息,这里记录一下在小程序中通过百度ocr识别的一个开发过程记录. 1. 注册百度云账号首先,我们要去百度云注册个账号,百度云注册 ,已经注册过可以忽略这部.注册 ...
php验证码百度ocr识别,利用百度OCR实现验证码自动识别
在爬取网站的时候都遇到过验证码,那么我们有什么方法让程序自动的识别验证码呢?其实网上已有很多打码平台,但是这些都是需要money.但对于仅仅爬取点数据而接入打码平台实属浪费.所以百度免费ocr正好可以 ...

关于vue 使用百度ocr识别跨域问题