創建專案已經完成了
qq交流群 535620886
最終效果體驗
http://dadandmother.cn/stt/

這節課我們來講下頁面跳轉以及底部選項
開發工具: Hbuilder X
完整代碼已上傳github https://github.com/dmhsq/image-recognition-flask-uniapp
bilibili教程視頻 https://www.bilibili.com/video/BV1R5411H7r2/
底部有視頻教程

前后端撰寫，互動，百度影像識別接入

百度影像識別接入
撰寫后端
- 撰寫api檔案
- 撰寫flask程式
撰寫前端
測驗
教學視頻

百度影像識別接入

百度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