vue 使用百度 API 实现图像识别

Brian_Jing

已于 2023-07-18 17:37:03 修改

阅读量3.9k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2019-09-29 09:35:13 首次发布

本文链接：https://blog.csdn.net/Brian_Jing/article/details/101549247

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

识别效果

在这里插入图片描述

事前准备

先去登录百度智能云控制台进入图像识别页面
2.点击创建应用

3.创建好之后看一下图片识别的接口文档这里使用的是 通用物体和场景识别高级版


请求URL： https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general
HTTP 方法：POST
URL参数：access_token	Body
Header:Content-Type	application/x-www-form-urlencoded
// access_token 通过API Key和Secret Key获取的access_token

下面是URL 参数的获取
在这里插入图片描述

在这里插入图片描述
这里我用 Postman 请求过来的 access_token
注： access_token 的时效只有30天

获取之后就开始掉接口了这里还涉及到Base64编码字符串图片互转 详见我写的另一篇

<template>
  <div>
    <input
      type="file"
      id="id"
      name="image"
      class="getImgUrl_file"
      @change="shangc($event)"
      accept="image/jpg, image/jpeg, image/png"
    />
    <br/>
    <img :src="picPath" alt="">

    
    <h4>识别结果:</h4>
    <table>
      <tr>
        <th>物品名称</th>
        <th>所属类目</th>
        <th>识别度</th>
      </tr>
      <tr  v-if="data" v-for="item in data"  >
        <td>{{item.keyword}}</td>
        <td>{{item.root}}</td>
        <td>{{item.score}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      picPath:''
    };
  },
  methods: {
    shangc(e) {
      let files = document.getElementById("id").files[0];
      let name = document.getElementById("id").files[0].name;
      // this.picPath=document.getElementById("id").value
      
      let arr = name.split(".");
      let fileSize = 0;
      let fileMaxSize = 10240; //1M
      if (files) {
        fileSize = files.size;
        if (fileSize > 10 * 1024 * 1024) {
          alert("文件大小不能大于10M！");
          file.value = "";
          return false;
        } else if (fileSize <= 0) {
          alert("文件大小不能为0M！");
          file.value = "";
          return false;
        }
      } else {
        return false;
      }
      //转码base64
      let reader = new FileReader();
      let imgFile;
      // let that = this
      reader.readAsDataURL(files);
      reader.onload = async e => {
        imgFile = e.target.result;
        let arr = imgFile.split(",");
        this.faceBase64 = arr[1];
        this.picPath='data:image/png;base64,'+arr[1]
        // console.log(imgFile)
        console.log(arr[1]);
        const { data: data } = await axios.post(
          "https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general",
          {
            access_token:
              "获取到的access_token",
            image: arr[1]
          }
        );
        this.data = data.result;
        console.log(this.data);
      };
    }
  }
};
</script>

<style  scoped>
table,th,td
{
border:1px solid orangered;

}
img{
  width: 400px;
    height: 400px;
    border: 1px solid red;
}
</style>