React Native应用对接Flask后端实现图片分类问题求助

一、当前报错的直接原因 #

Flask接口里尝试获取request.json['title']和request.json['body']，但前端发送的JSON数据仅包含image字段，导致触发KeyError，这是后端报错的核心原因。

二、完整解决方案步骤 #

1. 安装Flask跨域依赖 #

由于Expo应用与Flask后端属于不同源，需安装flask-cors解决跨域问题：

pip install flask-cors

2. 修改Flask后端代码 #

修复参数读取逻辑，添加base64图片解码、YOLO预测及结果序列化逻辑：

from flask import Flask, request, jsonify
from flask_cors import CORS
from PIL import Image
import io
import base64
from ultralytics import YOLO

app = Flask(__name__)
CORS(app)  # 允许跨域请求，生产环境可指定具体域名

# 加载YOLO模型（确认路径正确）
model = YOLO('D:/CMP Year two/second semester/Advanced micro/Project/detector/dirt-debris/dirt-debris.pt')

@app.route('/predict', methods=['POST'])
def predict():
    try:
        # 1. 获取前端传入的base64图片数据
        base64_str = request.json.get('image')
        if not base64_str:
            return jsonify({'error': '未提供图片数据'}), 400
        
        # 2. 移除base64前缀（若存在）
        if 'base64,' in base64_str:
            base64_str = base64_str.split('base64,')[1]
        
        # 3. 解码base64为二进制并转为PIL Image
        image_data = base64.b64decode(base64_str)
        img = Image.open(io.BytesIO(image_data)).convert('RGB')
        
        # 4. 调用YOLO模型预测（conf为置信度阈值，可按需调整）
        results = model.predict(source=img, conf=0.5)
        
        # 5. 整理预测结果为JSON可序列化格式
        predictions = []
        for result in results:
            for box in result.boxes:
                predictions.append({
                    '类别': result.names[int(box.cls)],
                    '置信度': float(box.conf),
                    '边界框': box.xyxy.tolist()[0]  # 格式：[x1, y1, x2, y2]
                })
        
        # 6. 返回处理结果
        return jsonify({
            '成功': True,
            '预测结果': predictions
        })
    
    except Exception as e:
        return jsonify({'错误': str(e)}), 500

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)  # host设为0.0.0.0允许局域网设备访问

3. 优化React Native前端代码 #

增加响应状态检查，完善错误提示逻辑：

const sendImageToServer = async (base64Image) => {
    const url = 'http://<你的局域网IP>:5000/predict';
    try {
        console.log("正在上传图片至服务器...");
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ image: base64Image })
        });
        
        // 检查响应状态是否正常
        if (!response.ok) {
            throw new Error(`请求失败，状态码：${response.status}`);
        }
        
        const jsonResponse = await response.json();
        console.log("服务器响应：", jsonResponse);
        
        // 根据返回结果做UI反馈
        if (jsonResponse.成功) {
            const classNames = jsonResponse.预测结果.map(item => item.类别).join(', ');
            alert(`检测到：${classNames}`);
        } else {
            alert(`后端错误：${jsonResponse.错误}`);
        }
    } catch (error) {
        console.error("上传图片出错：", error);
        alert(`上传失败：${error.message}`);
    }
};

const captureFrame = async () => {
    if (cameraRef.current) {
        const photo = await cameraRef.current.takePictureAsync({
            quality: 0.5, // 降低图片质量提升上传速度
            base64: true,
        });
        setCurrentFrame(photo.uri);
        sendImageToServer(photo.base64);
    }
};

三、关键注意事项 #

• 确保手机与运行Flask的电脑在同一局域网内，且Flask的host设为0.0.0.0，IP地址填写正确。
• 确认YOLO模型路径无误，避免出现模型加载失败的错误。
• 若图片上传过慢，可进一步降低takePictureAsync的quality值，或在后端添加图片压缩逻辑。
• 生产环境需关闭Flask的debug=True，并配置HTTPS与严格的跨域规则。

内容的提问来源于stack exchange，提问作者zizo