1.效果

2.后端主要代码

import os
import time
import numpy as np
import torch
from flask import Flask, request, send_file
import cv2
from ultralytics import YOLO  # 导入YOLOv11模型，需要提前安装ultralytics库

# 初始化Flask应用
app = Flask(__name__)

# 确保保存图片的目录存在
if not os.path.exists('./img'):
    os.makedirs('./img')
if not os.path.exists('./runs/detect/predict'):
    os.makedirs('./runs/detect/predict')

# 初始化YOLOv8模型，指定使用CPU
model = YOLO('./best.pt', device='cpu')

@app.route('/request', methods=['POST'])  # 推荐只接受POST请求处理文件上传
def uploads():
    start_time = time.time()  # 记录开始时间
    
    # 从请求中获取上传的文件
    uploaded_file = request.files['img']
    
    # 保存上传的文件到指定目录，并重命名为img.jpg
    uploaded_file.save(os.path.join('./img', 'img.jpg'))
    
    # 使用YOLOv8模型进行预测，指定输入图片目录和保存结果的目录
    model.predict('./img', save=True, save_conf=True, project='./runs/detect')
    
    # 计算并打印处理时间
    print(f"Processing time: {time.time() - start_time:.2f} seconds")
    
    # 返回成功响应
    return 'Image processed successfully', 200

@app.route('/get', methods=['GET'])  # 推荐只接受GET请求处理文件下载
def download():
    # 拼接预测结果图片的完整路径
    result_path = os.path.join('./runs/detect/predict', 'img.jpg')
    
    # 检查文件是否存在
    if os.path.exists(result_path):
        # 返回预测结果图片给客户端
        return send_file(result_path, mimetype='image/jpeg')
    else:
        # 如果文件不存在，返回错误响应
        return 'Result image not found', 404

# 主程序入口
if __name__ == '__main__':
    # 运行Flask应用，指定监听地址和端口
    app.run(host='localhost', port=8080, debug=True)
    # 如果需要在局域网内访问，可以修改host为局域网IP地址，并确保防火墙允许相应端口的访问
    # app.run(host='192.168.225.149', port=8080, debug=True)

3.前端主要代码

<!-- index.wxml -->

<!-- 这是一个空的文本节点，通常用于布局或占位，但在这里可能是不必要的 -->
<text>\n\n\n\n\n\n</text>

<!-- 定义一个视图容器，用于包含图片和两个按钮 -->
<view class="demo-box">
    <!-- 
        使用条件渲染来显示图片。只有当src属性有值时，图片才会被渲染。
        src属性绑定到页面的数据对象上，mode属性设置为aspectFit，表示图片会保持纵横比缩放，使图片的长边适应容器大小。
    -->
    <image wx:if="{
  
  {src}}" src="{
  
  {src}}" mode="aspectFit"></image>
    
    <!-- 
        定义一个按钮，当用户点击时，会触发clickme事件处理函数。
        type属性设置为primary，表示按钮的样式为主按钮样式。
        bindtap属性绑定到clickme函数，用于处理用户点击事件。
    -->
    <button type="primary" bindtap="clickme">上传</button>
    
    <!-- 
        这是一个空文本节点，可能用于布局或占位。在实际开发中，如果不需要，可以移除。
    -->
    <text>\n</text>
    
    <!-- 
        定义一个重置按钮，当用户点击时，会触发reset事件处理函数。
        type属性设置为primary，表示按钮的样式为主按钮样式。
        bindtap属性绑定到reset函数，用于处理用户点击事件，通常用于重置表单或清空数据。
    -->
    <button type="primary" bindtap="reset">重置</button>
    
    <!-- 
        这是一个空文本节点，同样可能用于布局或占位。在实际开发中，如果不需要，可以移除。
    -->
    <text>\n</text>
    
    <!-- 
        定义一个反馈按钮，但注意：在原始代码中，这里错误地重复了“重置”按钮。
        我将其更正为“反馈”按钮，并绑定到feedback事件处理函数（尽管该函数在提供的代码中未定义，需要您在JS文件中实现）。
        type属性设置为primary，表示按钮的样式为主按钮样式。
        bindtap属性绑定到feedback函数，用于处理用户点击事件，通常用于收集用户反馈。
    -->
    <button type="primary" bindtap="feedback">反馈</button>
</view>

4.说明

我是初学习者，发这个主要目的是做笔记，熬夜跑成功了，需要辅导的点击：

源码+服务-CSDN博客 

上的网址私聊，可以辅导目标检测、目标跟踪、PPT、专利、科创等。

参考原文：

Yolov5/8的小程序部署前后端实现_yolov8微信小程序-CSDN博客