YOLO + Flask + Vue 前后端分离 Web 检测系统 yolo Flask web端图片视频检测系统 使用Flask作为后端和vue作为前端，前后端分离 可以替换自己的模型
yolo Flask web端图片视频检测系统
可以替换自己的模型
使用Flask作为后端和vue作为前端，前后端分离。
有注册，登录，用户管理，图片检测，视频检测，历史检测图片管理，历史检测视频管理功能
支持mysql数据库或sqlite数据库，可随时切换。
默认使用yolov8默认模型 可以替换为你自己的模型 实现不同的检测功能。
支持yolov5到12等版本的模型【目标检测模型】
YOLO + Flask + Vue 前后端分离 Web 检测系统，支持多版本 YOLO 模型、用户系统、MySQL/SQLite 切换。
📊 系统功能与技术栈总览表
| 模块 | 功能说明 | 技术实现 |
|---|---|---|
| 前端 | 用户界面 | Vue3 + Element Plus + Axios |
| 后端 | API 服务 | Flask + Flask-SQLAlchemy + Flask-JWT |
| 数据库 | 用户 & 检测记录存储 | 默认 SQLite，可一键切换为MySQL（修改配置即可） |
| 模型支持 | 目标检测 | 支持yolov5/yolov8/yolov9/yolov10/yolo11/yolov12（通过ultralytics或自定义加载） |
| 默认模型 | 开箱即用 | yolov8n.pt（COCO 80 类） |
| 模型替换 | 自定义检测任务 | 替换model/best.pt并修改类别名称即可 |
| 用户系统 | 安全访问 | 注册、登录、JWT 鉴权、用户管理 |
| 检测功能 | 多模态输入 | 图片上传检测、视频上传检测（逐帧分析） |
| 历史记录 | 结果追溯 | 自动保存检测图片/视频缩略图 + 元数据到数据库 |
| 部署 | 轻量灵活 | 单机运行 or Docker 容器化 |
🔧 数据库配置切换示例（config.py）
# config.pyimportosclassConfig:SECRET_KEY='your-secret-key'# 默认使用 SQLiteSQLALCHEMY_DATABASE_URI='sqlite:///app.db'# 若需 MySQL，取消注释以下行（并安装 pymysql）# SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://user:password@localhost/yolo_db'SQLALCHEMY_TRACK_MODIFICATIONS=False✅ 切换数据库只需修改一行，无需改业务代码。
🧠 后端核心代码（Flask 极简版）
1.app.py—— 主程序
# app.pyfromflaskimportFlask,request,jsonify,send_filefromflask_sqlalchemyimportSQLAlchemyfromflask_jwt_extendedimportJWTManager,create_access_token,jwt_requiredimportcv2importosfromultralyticsimportYOLO# 支持 yolov8/v9/v10/v11/v12# 若用 yolov5，改用 from models.common import DetectMultiBackendapp=Flask(__name__)app.config.from_object('config.Config')db=SQLAlchemy(app)jwt=JWTManager(app)# === 模型加载（支持替换）===MODEL_PATH="model/best.pt"# 替换为你自己的 .pt 文件model=YOLO(MODEL_PATH)# === 用户模型 ===classUser(db.Model):id=db.Column(db.Integer,primary_key=True)username=db.Column(db.String(80),unique=True,nullable=False)password=db.Column(db.String(120),nullable=False)# === 注册 ===@app.route('/register',methods=['POST'])defregister():data=request.json user=User(username=data['username'],password=data['password'])db.session.add(user)db.session.commit()returnjsonify({"msg":"注册成功"})# === 登录 ===@app.route('/login',methods=['POST'])deflogin():data=request.json user=User.query.filter_by(username=data['username']).first()ifuseranduser.password==data['password']:token=create_access_token(identity=user.id)returnjsonify(access_token=token)returnjsonify({"msg":"用户名或密码错误"}),401# === 图片检测（需登录）===@app.route('/detect/image',methods=['POST'])@jwt_required()defdetect_image():file=request.files['image']img_path="uploads/"+file.filenamefile.save(img_path)results=model(img_path)output_path="results/"+file.filename results[0].save(filename=output_path)# 保存记录到数据库（略）returnsend_file(output_path,mimetype='image/jpeg')# === 视频检测（简化版）===@app.route('/detect/video',methods=['POST'])@jwt_required()defdetect_video():file=request.files['video']input_path="uploads/"+file.filename output_path="results/"+file.filenamefile.save(input_path)cap=cv2.VideoCapture(input_path)fourcc=cv2.VideoWriter_fourcc(*'mp4v')out=cv2.VideoWriter(output_path,fourcc,30.0,(640,640))whilecap.isOpened():ret,frame=cap.read()ifnotret:breakresults=model(frame)annotated_frame=results[0].plot()out.write(annotated_frame)cap.release()out.release()returnsend_file(output_path,as_attachment=True)if__name__=='__main__':withapp.app_context():db.create_all()app.run(debug=True)🌐 前端核心代码（Vue3 极简调用）
1.DetectImage.vue
<template> <input type="file" @change="uploadImage" accept="image/*" /> <img v-if="resultUrl" :src="resultUrl" style="max-width:600px" /> </template> <script setup> import axios from 'axios' const uploadImage = async (e) => { const file = e.target.files[0] const formData = new FormData() formData.append('image', file) const res = await axios.post('/detect/image', formData, { headers: { Authorization: `Bearer ${localStorage.token}` } }) // 假设后端返回图片 URL 或 blob const blob = await res.data.blob() resultUrl.value = URL.createObjectURL(blob) } </script>📁 项目目录结构建议
yolo-web-system/ ├── backend/ │ ├── app.py │ ├── config.py │ ├── model/ # ← 放你的 best.pt │ ├── uploads/ # 上传文件 │ └── results/ # 检测结果 ├── frontend/ │ ├── src/ │ │ ├── views/Login.vue │ │ ├── views/DetectImage.vue │ │ └── ... │ └── package.json └── requirements.txt✅ 如何替换为自己的模型？
- 将你的训练好的
.pt文件放入backend/model/best.pt - （可选）修改前端类别名称显示（如从 COCO 的
person改为tea_pest） - 重启 Flask 服务即可生效
💡 支持所有 Ultralytics 官方模型（YOLOv8~v12），YOLOv5 需额外加载逻辑。
⚙️ 依赖安装（requirements.txt）
flask flask-sqlalchemy flask-jwt-extended opencv-python ultralytics>=8.3.0 numpy pymysql # 仅当使用 MySQL 时需要