創建項目已經完成了
qq交流羣 535620886
最終效果體驗
http://dadandmother.cn/stt/這節課我們來講下 頁面跳轉以及底部選項
開發工具: Hbuilder X
完整代碼已上傳github https://github.com/dmhsq/image-recognition-flask-uniapp
bilibili教程視頻 https://www.bilibili.com/video/BV1R5411H7r2/
底部有視頻教程
百度圖像識別接入
百度ai開放平臺 http://ai.baidu.com/
創建應用 選擇個人就好
在應用列表獲取
記得這幾個值
查看文檔 https://cloud.baidu.com/doc/IMAGERECOGNITION/s/vk3bcxiu2
根據文檔 我們編寫後端
編寫後端
安裝 baidu-aip
同理安裝flask
編寫api文件
參數說明 type爲1時 動物識別 爲2時植物識別 image是讀取圖片文件的結果 file.read()
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 delImg(type,image):
if(type==1):
return __animal(image)
if(type==2):
return __plant(image)
""" 調用動物識別 """
def __animal(image):
return client.animalDetect(image)
""" 調用植物識別 """
def __plant(image):
return client.plantDetect(image)
編寫flask程序
from flask import Flask,request
import os,json
from md5random import sjs
from ourApi import delImg
app = Flask(__name__)
@app.route("/file",methods=['POST'])
def test():
get_image = request.files['file']
dst = sjs();
get_image.save(dst)
cont = ""
with open(dst,'rb') as file:
cont = file.read();
os.remove(dst)
return json.dumps(delImg(1,cont))
if __name__ == '__main__':
app.run(host='0.0.0.0',port=8087)
md5random說明 ：是一個隨機字符串生成器
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;
運行我們的our_app文件啓動服務
編寫前端
說明
先選擇圖片 再上傳圖片
uniapp官方文檔 api
選擇圖片 https://uniapp.dcloud.io/api/media/image?id=chooseimage
上傳文件 https://uniapp.dcloud.io/api/request/network-file
imgSrc 圖片路徑
<template>
<view class="content">
<image class="logo" :src="imgSrc" @click="goTest()"></image>
<view class="text-area">
<text class="title">{
{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
imgSrc: '/static/logo.png'
}
},
onLoad() {
},
methods: {
goTest(){
let vm =this;
uni.chooseImage({
count: 1,
success: function (res) {
vm.imgSrc = res.tempFilePaths[0];
uni.uploadFile({
url:'http://localhost:8087/file',
filePath:res.tempFilePaths[0],
name:'file',
formData:{
'type':1
},
success:function(ress){
console.log(ress)
}
})
}
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
測試
成功
教學視頻
uniapp開發教程-P3-前後端編寫，交互，百度圖像識別接入
大家好，我是代碼哈士奇，是一名軟件學院網絡工程的學生，因爲我是“狗”，狗走千里喫肉。想把大學期間學的東西和大家分享，和大家一起進步。但由於水平有限，博客中難免會有一些錯誤出現，有紕漏之處懇請各位大佬不吝賜教！博客主頁：https://blog.csdn.net/qq_42027681。
騰訊雲+社區專欄https://cloud.tencent.com/developer/column/90853
未經本人允許，禁止轉載
後續會推出
前端：vue入門 vue開發小程序 等
後端： java入門 springboot入門等
服務器：mysql入門 服務器簡單指令 雲服務器運行項目
python：推薦不溫卜火 一定要看哦
一些插件的使用等
大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq羣一起交流：974178910
有問題可以下方留言，看到了會回覆哦