原创

vue页面直接调用百度图片文字识别的接口

温馨提示:
本文最后更新于 2022年11月02日,已超过 780 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

vue 直接调用百度的图片识别接口,需要处理跨域问题,不会的看 https://blog.csdn.net/qq_29832217/article/details/102769793#comments

第一步获取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;
        }
      })

第二步 将图片进行base64 编码,截取,不需要头信息,并且不需要进行lurlencode

 

  var fileObj = param.file;
      var reader = new FileReader()
      reader.readAsDataURL(fileObj)
      reader.onload = () => {
      this.fileData = reader.result
      this.fileData = this.fileData.split(',')
      this.fileData =this.fileData[1];  
       var form = new FormData();
      // 文件对象
      form.append("image", this.fileData);
      form.append("access_token", this.access_token);
      this.form.resultText = '';
      this.loading = true;
      //let baiduApi = 'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic'
      this.axios.post('/baiduApi/rest/2.0/ocr/v1/accurate_basic',form,
       //this.axios.post(baiduApi,form,
        {  headers:{  dataType:'json',
                      contentType:'application/x-www-form-urlencoded',
         }}).then(res =>{
        if(res.status ==200){
          let str = '';
          console.info(res);
           let data = res.data.words_result;
           for(var i = 0;i< data.length;i++){
             str = str + data[i].words+'\n'
           }
            console.info(str);
            var mygoChart = document.getElementById("mygoChart");
            var parentDiv = document.getElementById("parentDiv");
            parentDiv.removeChild(mygoChart);
            var div = document.createElement("div");
            div.style.height = this.mygoChartHeight+'px';
            div.setAttribute("id", "mygoChart");
            parentDiv.appendChild(div);
            var form = new FormData();
            form.append("resultText", str);
            form.append("isFormat", true);
            this.loading = true;
            this.$api.analysisText(form).then(res => {
                this.nodeDataArray = [];
                this.linkDataArray = [];
                this.tableData = [];
                this.loading = false;
                this.form.resultText = res.dataMap["resultText"];
                if(res.dataMap["targetIp"]!= '' && res.dataMap["targetIp"]!= null){
                   this.targetIp = res.dataMap["targetIp"];
                   this.traceRouteStatus = res.dataMap["traceRouteStatus"] == 0? '正常':'不通';
                }else{
                   this.targetIp = '未知';
                   this.traceRouteStatus = '未知';
                }
                if (res.statusCode == 0) {
                  this.dialogFormVisible = false;
                  this.fillDate(res);
                  this.initGoJS();
                } else if (res.statusCode == 1) {
                  this.$message({
                    type: "error",
                    message: res.errorMessage
                  });
                  this.loading = false;
                } else {
                  this.$message({
                    type: "error",
                    message: "后台服务器出错,请稍后再试"
                  });
                  this.loading = false;
                  this.dialogFormVisible = false;
                }
              })
              .catch(error => {
                this.$message({
                  type: "error",
                  message: "请求失败,请稍后再试"
                });
                this.loading = false;
              });

                      }
                    })
            }

 

正文到此结束
本文目录