加上踩坑一共花了3个小时左右
代码已放置github https://github.com/dmhsq/image-recognition-flask-uniapp
效果如下
手机也跑通了但是制作gif图麻烦就电脑制作了

uni-app+flask 快速开发图像识别小程序

后端 (Python Flask)
- 获取百度ai开放平台应用密钥
- 随机字符串产生器 (md5random.python文件)
- 封装api (AipImageClassify.py文件)
- 编写接口文件
前端 (uni-app)
- 开发工具安装以及搭建项目
- 首页
- 历史
- - 注意
- 识别页
- 上次图片功能
完整代码

后端 (Python Flask)

获取百度ai开放平台应用密钥

打开这个地址https://console.bce.baidu.com/?fromai=1#/aip/overview
然后选择图像识别

如果没有应用就创建
有的话就点击应用列表

记住这里的
AppID

API Key

Secret Key

随机字符串产生器 (md5random.python文件)

保证每一个文件名都不一样

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

如果失效手动安装

APP_ID
API_KEY
SECRET_KEY
这三个我们在第一步获取了

这里我们只调用了几个想要调用更多请参考官方文档
图像识别官方文档

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 "类型或图片格式错误"""" 调用动物识别 """
def __animal(image):return client.animalDetect(image);""" 调用菜品识别 """
def __dish(image):return client.dishDetect(image);""" 调用车辆识别 """
def __car(image):return client.carDetect(image);""" 调用植物识别 """
def __plant(image):return client.plantDetect(image);""" 调用食材识别 """
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'];'''拼接得到文件应当在的路径'''dst = os.path.join(os.path.dirname(__file__),sjs()+params_file.name);'''存入本地'''params_file.save(dst)cont = "";with open(dst, 'rb') as file:'''获取文件二进制'''cont = file.read()'''打印方便观察 也知道程序进度'''print(cont)'''删除文件'''    os.remove(dst);'''获取表单数据type'''type=int(request.form['type'])'''打印方便观察 也知道程序进度'''print(cont)'''调用百度api并将结果转为json字符串并返回'''return json.dumps(get_imgGeneral(type,cont));
if __name__=='__main__':app.run(host='0.0.0.0',port=8086)

前端 (uni-app)

一共三个页面
首页(index)，历史(mine)，识别页(apiuse)

开发工具安装以及搭建项目

写过类似文章请移步
开发工具安装
页面以及导航

首页

尽量节省代码量所以新建项目后
就加了个 uni-list
根据文档说法 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="动物识别"  showArrow thumb="/static/img/animal.png" thumb-size="base" clickable @click="goSb(0)" /><uni-list-item title="植物识别"  showArrow thumb="/static/img/botany.png" thumb-size="base" clickable @click="goSb(3)" /><uni-list-item title="车辆识别"  showArrow thumb="/static/img/car.png" thumb-size="base" clickable @click="goSb(2)" /><uni-list-item title="菜品识别"  showArrow thumb="/static/img/foods.png" thumb-size="base" clickable @click="goSb(1)" /><uni-list-item title="果蔬识别"  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

注意

本地存储只能存储字符串
所以需要转换成json字符串 JSON.stringify(object)
使用时再转成json对象 JSON.parse(str)

<template><view><view class="content" v-if="tableList.length==0"><text class="title">您还没有识别哦~~~</text></view><view class="box" v-if="tableList.length>0"><t-table @change="change"><t-tr><t-th>时间</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>

识别页

用到了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>序号</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//云端忽略//手机调试需要修改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

大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：https://blog.csdn.net/qq_42027681。

未经本人允许，禁止转载

后续会推出

前端：vue入门 vue开发小程序等
后端： java入门 springboot入门等
服务器：mysql入门服务器简单指令云服务器运行项目
python：推荐不温卜火一定要看哦
一些插件的使用等

大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910

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

uni-app+flask 快速开发图像识别小程序相关推荐

使用 Taro 快速开发京东小程序
近两年来小程序逐渐成为互联网的一个行业风口,一直备受业界关注,各大厂也接踵推出了自己的小程序.近日京东也推出了小程序:京东小程序.Taro 作为一款专注于多端统一开发的框架,第一时间对京东小程序进行了 ...
【如何开发小程序？】如何快速开发一个小程序
在过去,对于新手来说,如何开发一个小程序只需要半个月到一个月的时间来制作一个简单的小程序.在中间,您需要了解小程序代码的逻辑语言.您需要查看微信官方平台开发文档中的大量示例和示例.那么现在如何开发 ...
uni-app快速开发微信小程序、h5、和app
过年在家无聊,尝试使用uni-app开发微信小程序,发现这个框架的跨端功能非常强大,几乎能直接从vue移植过来下面是项目架构图应用截图技术栈: 后端 node +mysql 抓取各大视频网站的数 ...
python如何开发小软件-Python程序员，如何快速开发一个小程序
要点: 小程序是前后端分离的. 前端使用的是微信自定义的一套规范wxml+wxss+json+js,本质还是html+css+js. 后台可以选用任何你熟悉的语言:Java,Python,PHP,Ru ...
Taro3.x 快速开发微信小程序以及 minidebug 小程序调试工具使用
前言最近公司准备开发一款扫码开票类型的微信小程序,时间紧,任务急.第一反应就是打开小程序开放平台查看开发文档,哦豁,官方的组件也太少了吧,难道要自己手写吗 ? 经过多方调研,了解目前市面上比较流行的 ...
AAuto 快速开发win32小程序
AAuto编程语言 AAuto是专用于桌面软件快速开发的新一代混合型编程语言 - 具有动态语言轻便.灵活.快速开发的特性,而且又可以同时支持静态类型开发,象静态语言那样使用.AAuto可以直接支持原 ...
Python+wxWidgets快速开发桌面小程序
转载:http://www.blogjava.net/calvin/archive/2005/11/18/20403.html 充分体验到知识循环再用的好处,原本对Python.wxWidgets没有 ...
直播｜一小时上手谷歌亲儿子 PWA 技术，快速开发 Web 小程序！
每个人的手机里,都躺着几个几乎从来不用的 App ,比如各种旅行订票.视频直播.外卖团购类 APP 等. 久而久之,我们的手机从 16G 变成了 32G.64G.128G 甚至 512G-- 这个时候 ...
快速开发微信小程序之一
一.背景记得11.12年的时候大家一窝蜂的开始做客户端Android.IOS开发,我是直14年才开始做Andoird开发,干了两年多,然后18年左右微信小程序火了,我也做了两个小程序,一个是将原有牛 ...
快速开发微信小程序之二-微信支付
一.背景在面试程序员的时候,有两项经历会带来比较大的加分,第一你是否做过支付金融相关的业务,第二你是否写过底层框架中间件代码,今天我们聊一下微信支付是如何对接的. 二.相关概念 1.微信商户平台要 ...

uni-app+flask 快速开发图像识别小程序

uni-app+flask 快速开发图像识别小程序

后端 (Python Flask)

获取百度ai开放平台应用密钥

随机字符串产生器 (md5random.python文件)

封装api (AipImageClassify.py文件)

编写接口文件

前端 (uni-app)

开发工具安装以及搭建项目

首页

历史

注意

识别页

上次图片功能

完整代码

uni-app+flask 快速开发图像识别小程序相关推荐

最新文章

热门文章