记vue axios请求百度ocr图像识别api的悲惨经历

本次是做一个识别车牌号的小应用，借助百度ai开放平台的OCR识别API
百度AI开放平台注册账号，巴拉巴拉就不说了
直接进入硬核部分
目标是通过纯前端，axios请求api接口，返回一个结果，前端展示即可。
前端部分，使用vue搭建界面，使用了vant的upload组件，toast组件

请求接口部分的操作步骤
1.获取token
使用postman或在线工具，
向授权服务地址https://aip.baidubce.com/oauth/2.0/token发送POST请求，并在URL中带上以下参数：
grant_type： 必须参数，固定为client_credentials；
client_id： 必须参数，应用的API Key；
client_secret： 必须参数，应用的Secret Key；

获取token图示
把后面的一长串字符串记录下来，这个就是token，一个月换一次，请注意更换

2.发起请求

afterRead(file) {
      let temp = file.content;    //上传后获取文件内容，是base64格式
      let index = temp.indexOf(",");   //我们需要的是不带前缀的base64图片信息，这里需要截取掉
      let img = temp.slice(index + 1);   //这里获得了真实的base64图片信息，后面需要用这个
      let bsurl =                       //请求地址拼接，需要前端做跨域配置，注意配置文件放置位置，血泪史
        this.$API +
        "/rest/2.0/ocr/v1/license_plate?access_token=24.6da90944b8666b774eb81dbe8aeb599f.2592000.1570786018.282335-17229098";
      axios({
        method: "post",
        url: bsurl,
        headers: { "Content-Type": "application/x-www-form-urlencoded" },   //根据文档要求，设置请求头
        data: "image=" + encodeURIComponent(img)               //这里才是最最最重要的地方，也是最血泪的地方，研究了一天零一夜才出来的结果，感觉子君兄弟的指导。
      }).then(res => {
        if (res.data.words_result) {
          this.msg = res.data.words_result.number;   //后面的简单了，把请求结果渲染出来就好了
        } else {
          Toast({
            type: "fail",
            message: "你的车牌太厉害，我读不出来！",
            icon: "fail",
            mask: true,
            duration: 2000
          });
        }
      });
    }

源代码地址https://gitee.com/zyw0605688_admin/baiduai.git