The creation of the project has been completed
qq exchange group 535620886
final effect experience
http://dadandmother.cn/stt/In this lesson, let’s talk about page jumps and bottom options.
Development tools: Hbuilder X
complete code has been uploaded to github https://github.com/dmhsq/image-recognition-flask-uniapp
bilibili tutorial video https://www.bilibili .com/video/BV1R5411H7r2/
There is a video tutorial at the bottom
Front-end and back-end writing, interaction, Baidu image recognition access
Baidu image recognition access
Baidu ai open platform http://ai.baidu.com/
Create an application and choose an individual just
to get
these values in the application list
View the documentation https://cloud.baidu.com/doc/IMAGERECOGNITION/s/vk3bcxiu2
According to the documentation, we write the backend
Write backend
Install baidu-aip and
install flask in the same way
Write api file
Parameter description When type is 1, animal recognition is 2, plant recognition image is the result of reading the image file 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)
Write flask program
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 description: is a random string generator
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;
Run our our_app file to start the service
Writing the front end
Instructions
First select the image and then upload the image.
Uniapp official document api
select the image https://uniapp.dcloud.io/api/media/image?id=chooseimage
upload the file https://uniapp.dcloud.io/api/request/network- file
imgSrc image path
<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>
test
success
Teaching video
uniapp development tutorial-P3-Front and back end writing, interaction, Baidu image recognition access
Hello everyone, I am a code husky, a student of network engineering in the Software College, because I am a "dog", and I can eat meat for thousands of miles. I want to share what I learned during university and make progress with everyone. However, due to the limited level, there will inevitably be some mistakes in the blog. If there are any omissions, please let me know! Blog homepage: https://blog.csdn.net/qq_42027681 .
Tencent Cloud + Community Column https://cloud.tencent.com/developer/column/90853
未经本人允许，禁止转载
Will be launched later
Front-end: vue entry vue development applet, etc.
Back-end: java entry springboot entry, etc.
Server: MySQL entry server simple instructions cloud server to run the project
python: recommended not to warm up, be sure to see
the use of some plug-ins, etc.
The way of university is also in oneself, study hard, youth
with passion. If you are interested in programming, you can join our qq group to communicate together: 974178910
If you have any questions, you can leave a message below, I will reply if you see it