创建项目已经完成了
qq交流群 974178910
最终效果体验
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 delImgapp = 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

有问题可以下方留言，看到了会回复哦

uni-app实战教程-----H5移动app以及小程序(四)---前后端编写，交互，百度图像识别接入相关推荐

开源智能电子名片系统源码含小程序完整前后端+搭建教程
分享一个开源版智能电子名片小程序系统源码,系统为平台版,基于微信,代码包含了完整前后端+数据库+搭建教程.一张名片打通6大系统:名片+商城+官网+AI雷达+CRM+客服. 系统特色功能一览: 1. ...
app如何添加广告位 uni_uniapp给全端小程序添加激励广告详细教程
uniapp是一款使用 Vue.js 开发跨平台应用的前端框架,可以全端兼容小程序平台和APP端,不管网上评论如何,但是本人表示利用uniapp开发小程序还是挺不错的,而大多小程序都是通过流量主获取收 ...
微信网页开发：微信内h5使用wx-open-launch-weapp打开小程序，微信内h5使用wx-open-launch-app打开App的方案
需求场景: 当我们需要使用在微信客户端打开的h5页面,在页面上打开微信小程序或者唤起App时,我们需要使用微信js-sdk提供的开放标签能力.这其中:使用wx-open-launch-weapp标签打 ...
微信小程序android错误,app安卓端跳转到微信小程序失败
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] app安卓端跳转到 ...
SpringBoot后台管理+Uniapp（混合APP）前端之酒店住宿+景点下单管理系统（SpringBoot前后端分离）
酒店住宿+景点下单管理系统(SpringBoot前后端分离) 之 SpringBoot后台管理+Uniapp(混合APP)前端 SpringBoot前后端分离项目-Thymeleaf模板引擎景区旅游管 ...
把你们的APP卸载了吧，来玩小程序。
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 互联网快速消费时代,很多网站及服务推出了相应APP,但对于手机内存并不宽裕的用户来说,下载资源不 ...
h5跳转微信小程序方案及注意事项（vue方向）
h5跳转微信小程序方案步骤 1.准备 2.绑定域名 (在[微信公众平台](https://mp.weixin.qq.com/)设置) 3.IP白名单(在[微信公众平台](https://mp.weix ...
小程序接入h5页面_原生小程序接入H5页面，请求后台接口，获取数据
项目开发中赶上三端接入h5的需求,因此本身动手作h5页面,可是在作的过程当中也赶上了许多的问题javascript 小程序端不支持在本地引入,因此须要将h5发布服务器,以请求接口的形式进行访问html ...
小程序接入h5页面_微信小程序跳转外部链接（h5页面）以及数据交互
最近项目有个需求,在微信小程序中跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面. 1.跳转外部链接(官方文档) 1)入口 //跳转到入口 wx.navigateTo({url: '.. ...

uni-app实战教程-----H5移动app以及小程序(四)---前后端编写，交互，百度图像识别接入