加上踩坑一共花了3個(gè)小時(shí)左右
代碼已放置github https://github.com/dmhsq/image-recognition-flask-uniapp
效果如下
手機(jī)也跑通了 但是制作gif圖麻煩 就電腦制作了

uni-app+flask 快速開發(fā)圖像識(shí)別小程序

• 后端 (Python Flask)
• • 獲取百度ai開放平臺(tái)應(yīng)用密鑰
  • 隨機(jī)字符串產(chǎn)生器 (md5random.python文件)
  • 封裝api (AipImageClassify.py文件)
  • 編寫接口文件
• 前端 (uni-app)
• • 開發(fā)工具安裝以及搭建項(xiàng)目
  • 首頁
  • 歷史
  • • 注意
  • 識(shí)別頁
  • 上次圖片功能
• 完整代碼

后端 (Python Flask)

獲取百度ai開放平臺(tái)應(yīng)用密鑰

打開這個(gè)地址https://console.bce.baidu.com/?fromai=1#/aip/overview
然后選擇圖像識(shí)別

如果沒有應(yīng)用 就創(chuàng)建
有的話就點(diǎn)擊應(yīng)用列表

記住這里的
AppID

API Key

Secret Key

隨機(jī)字符串產(chǎn)生器 (md5random.python文件)

保證每一個(gè)文件名都不一樣

import random import hashlib def sjs():a = random.randint(0, 100)a = "a" + str(a);b = random.randint(100, 10000);b = "b" + str(b);c = hashlib.md5(a.encode(encoding='UTF-8')).hexdigest() + hashlib.md5(b.encode(encoding='UTF-8')).hexdigest();c = "c" + str(c);d = random.randint(10, 100);d = "d" + str(d);e = hashlib.md5(c.encode(encoding='UTF-8')).hexdigest() + hashlib.md5(d.encode(encoding='UTF-8')).hexdigest();e = hashlib.md5(e.encode(encoding='UTF-8')).hexdigest()return e;

封裝api (AipImageClassify.py文件)

需要安裝百度api

pip install baidu-aip

如果失效 手動(dòng)安裝

APP_ID
API_KEY
SECRET_KEY
這三個(gè)我們在第一步獲取了

這里我們只調(diào)用了幾個(gè) 想要調(diào)用更多 請參考官方文檔
圖像識(shí)別官方文檔

from aip import AipImageClassify""" 你的 APPID AK SK """ APP_ID = '你的 App ID' API_KEY = '你的 Api Key' SECRET_KEY = '你的 Secret Key'client = AipImageClassify(APP_ID, API_KEY, SECRET_KEY)def get_imgGeneral(type,image):if(type==0):return __animal(image)elif(type==1):return __dish(image)elif(type==2):return __car(image)elif(type==3):return __plant(image)elif(type==4):return __ingred(image)else:return "類型或圖片格式錯(cuò)誤"""" 調(diào)用動(dòng)物識(shí)別 """ def __animal(image):return client.animalDetect(image);""" 調(diào)用菜品識(shí)別 """ def __dish(image):return client.dishDetect(image);""" 調(diào)用車輛識(shí)別 """ def __car(image):return client.carDetect(image);""" 調(diào)用植物識(shí)別 """ def __plant(image):return client.plantDetect(image);""" 調(diào)用食材識(shí)別 """ def __ingred(image):return client.ingredient(image);

編寫接口文件

from flask import Flask,request import json,os from AipImageClassify import get_imgGeneral from md5random import sjs; app = Flask(__name__)@app.route("/file",methods=['POST']) def upfile():'''獲取文件'''params_file = request.files['file'];'''拼接得到文件應(yīng)當(dāng)在的路徑'''dst = os.path.join(os.path.dirname(__file__),sjs()+params_file.name);'''存入本地'''params_file.save(dst)cont = "";with open(dst, 'rb') as file:'''獲取文件二進(jìn)制'''cont = file.read()'''打印方便觀察 也知道程序進(jìn)度'''print(cont)'''刪除文件''' os.remove(dst);'''獲取表單數(shù)據(jù)type'''type=int(request.form['type'])'''打印方便觀察 也知道程序進(jìn)度'''print(cont)'''調(diào)用百度api并將結(jié)果轉(zhuǎn)為json字符串并返回'''return json.dumps(get_imgGeneral(type,cont)); if __name__=='__main__':app.run(host='0.0.0.0',port=8086)

前端 (uni-app)

一共三個(gè)頁面
首頁(index)，歷史(mine)，識(shí)別頁(apiuse)

開發(fā)工具安裝以及搭建項(xiàng)目

寫過類似文章 請移步
開發(fā)工具安裝
頁面以及導(dǎo)航

首頁

盡量節(jié)省代碼量 所以新建項(xiàng)目后
就加了個(gè) uni-list
根據(jù)文檔說法 uni=list不需要再注冊組件

<template><view><view class="content"><image class="logo" src="/static/main.jpg"></image><view class="text-area"><text class="title">{{title}}</text></view></view><uni-list><uni-list-item title="動(dòng)物識(shí)別" showArrow thumb="/static/img/animal.png" thumb-size="base" clickable @click="goSb(0)" /><uni-list-item title="植物識(shí)別" showArrow thumb="/static/img/botany.png" thumb-size="base" clickable @click="goSb(3)" /><uni-list-item title="車輛識(shí)別" showArrow thumb="/static/img/car.png" thumb-size="base" clickable @click="goSb(2)" /><uni-list-item title="菜品識(shí)別" showArrow thumb="/static/img/foods.png" thumb-size="base" clickable @click="goSb(1)" /><uni-list-item title="果蔬識(shí)別" showArrow thumb="/static/img/food.png" thumb-size="base" clickable @click="goSb(4)" /><uni-list-item title="清除歷史" showArrow thumb="/static/img/laji.png" thumb-size="base" clickable @click="qclocal()" /></uni-list></view> </template>

歷史

用到了tTable組件
需要到插件市場下載
插件市場地址 https://ext.dcloud.net.cn/plugin?id=413

注意

本地存儲(chǔ)只能存儲(chǔ)字符串
所以需要轉(zhuǎn)換成json字符串 JSON.stringify(object)
使用時(shí)再轉(zhuǎn)成json對象 JSON.parse(str)

<template><view><view class="content" v-if="tableList.length==0"><text class="title">您還沒有識(shí)別哦~~~</text></view><view class="box" v-if="tableList.length>0"><t-table @change="change"><t-tr><t-th>時(shí)間</t-th><t-th>類型</t-th><t-th>最大可能</t-th></t-tr><t-tr v-for="item in tableList" :key="item.date"><t-td>{{ item.date }}</t-td><t-td>{{ item.type }}</t-td><t-td>{{ item.onebe}}</t-td></t-tr></t-table> </view></view> </template> <script>import tTable from '@/components/t-table/t-table.vue';import tTh from '@/components/t-table/t-th.vue';import tTr from '@/components/t-table/t-tr.vue';import tTd from '@/components/t-table/t-td.vue'; export default {components: {tTable,tTh,tTr,tTd }, data() {return {tableList:[]}},onPullDownRefresh() {this.getData();},onLoad() {this.getData();},onShow() {this.getData();},methods: {getData(){uni.showLoading({title: '加載中'});let vm = this;uni.getStorage({key:'historys',success: res=>{let datas = JSON.parse(res.data);uni.hideLoading();uni.stopPullDownRefresh();vm.tableList = datas;},fail:function(){vm.tableList = [];uni.hideLoading(); uni.stopPullDownRefresh();}})}}} </script>

識(shí)別頁

用到了tTable組件
需要到插件市場下載
插件市場地址 https://ext.dcloud.net.cn/plugin?id=413

<template><view><view class="content" :class="{bgs:(imgSrc!=''),ybgs:(imgSrc=='')}"><image class="logo" :src="imgSrc"></image></view><button @click="upfile()">上傳圖片</button><view class="box" v-if="isHas"><t-table @change="change"><t-tr><t-th>序號(hào)</t-th><t-th>類型</t-th><t-th>可能性</t-th></t-tr><t-tr v-for="(item,index) in tableList" :key="item.name"><t-td>{{ index + 1 }}</t-td><t-td>{{ item.name }}</t-td><t-td>{{ item.score | dealVal}}</t-td></t-tr></t-table> </view></view> </template>

上次圖片功能

uni.chooseImage({ count: 1, success: function (res) {console.log(res)vm.imgSrc = res.tempFilePaths[0];console.log(JSON.stringify(res.tempFilePaths));uni.uploadFile({//上次測試http://192.168.0.103:8086//云端忽略//手機(jī)調(diào)試需要修改ip地址url:'http://localhost:8086/file',filePath:res.tempFilePaths[0],name:'file',formData: {'type': 0 },success: (request) => {uni.showLoading({title: '加載中'});console.log(request.data)let str = unescape(request.data.replace(/\\u/g, "%u"));let s = JSON.parse(str)uni.hideLoading();vm.tableList = s.result;vm.isHas = true;}})} });

完整代碼

這里不再放置 有需要去giyhub下載即可
https://github.com/dmhsq/image-recognition-flask-uniapp

??大家好，我是代碼哈士奇，是一名軟件學(xué)院網(wǎng)絡(luò)工程的學(xué)生，因?yàn)槲沂恰肮贰?#xff0c;狗走千里吃肉。想把大學(xué)期間學(xué)的東西和大家分享，和大家一起進(jìn)步。但由于水平有限，博客中難免會(huì)有一些錯(cuò)誤出現(xiàn)，有紕漏之處懇請各位大佬不吝賜教！暫時(shí)只在csdn這一個(gè)平臺(tái)進(jìn)行更新，博客主頁：https://blog.csdn.net/qq_42027681。

未經(jīng)本人允許，禁止轉(zhuǎn)載

后續(xù)會(huì)推出

前端：vue入門 vue開發(fā)小程序 等
后端： java入門 springboot入門等
服務(wù)器：mysql入門 服務(wù)器簡單指令 云服務(wù)器運(yùn)行項(xiàng)目
python：推薦不溫卜火 一定要看哦
一些插件的使用等

大學(xué)之道亦在自身，努力學(xué)習(xí)，熱血青春
如果對編程感興趣可以加入我們的qq群一起交流：974178910

有問題可以下方留言，看到了會(huì)回復(fù)哦

總結(jié)

以上是生活随笔為你收集整理的uni-app+flask 快速开发图像识别小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。