[特殊字符] 基于 FastAPI 和 React 构建车牌号识别网站

1. 项目概述

在本项目中，我们将构建一个 车牌号识别网站 ，用户可以上传车辆图片，系统会通过 OCR 车牌识别模型（PaddleOCR / HyperLPR） 提取车牌号码，并将结果展示到前端。同时，用户可以选择不同的 OCR 模型，并查看识别历史记录。

2. 网站功能需求

✅ 核心功能

图片上传 📷 - 用户上传包含车牌的图片
车牌号识别 🔍 - 通过 OCR 识别车牌号
模型选择 🏷 - 用户可切换 PaddleOCR / HyperLPR
结果展示 📜 - 前端显示识别结果
识别历史 🕒 - 存储识别记录，用户可查看历史
API 支持 🖥 - 提供 RESTful API，支持前后端交互

🎨 扩展功能

数据库存储 - 使用 MySQL 存储识别记录
用户权限管理 - 采用 JWT 进行认证
批量上传 - 允许用户一次上传多张图片并识别

3. 技术选型

🖥️ 后端（FastAPI）

FastAPI - Python 的轻量级 Web 框架，支持异步、高性能 API 开发
PaddleOCR / HyperLPR - 车牌识别 OCR
MySQL - 存储用户识别记录
SQLAlchemy - ORM 进行数据库管理
JWT / OAuth2 - 用户认证

🌐 前端（React）

React + Vite - 现代前端框架，提供快速交互体验
Ant Design - 美观的 UI 组件库
Axios - 进行 API 请求

4. 项目架构

car-plate-recognition/
├── backend/                # FastAPI 后端
│   ├── main.py             # FastAPI 入口
│   ├── models.py           # 数据库模型
│   ├── routes/             # API 路由
│   │   ├── ocr.py          # 车牌识别 API
│   │   ├── auth.py         # 用户认证 API
│   │   ├── history.py      # 识别历史 API
│   ├── services/           # 业务逻辑
│   │   ├── ocr_service.py  # OCR 识别处理
│   ├── database.py         # 数据库连接
│   ├── config.py           # 配置文件
│   ├── requirements.txt    # 依赖库
│   ├── Dockerfile          # 容器化部署
├── frontend/               # React 前端
│   ├── src/
│   │   ├── components/     # 组件
│   │   ├── pages/          # 页面
│   │   ├── services/       # API 请求
│   │   ├── App.tsx         # 入口
│   │   ├── index.tsx       # 渲染入口
│   ├── package.json        # 前端依赖
│   ├── vite.config.ts      # Vite 配置
├── docker-compose.yml      # 一键部署

5. FastAPI 后端开发

5.1 安装依赖

bash 复制代码

pip install fastapi uvicorn paddleocr hyperlpr mysql-connector-python sqlalchemy python-multipart pydantic jwt

5.2 配置 FastAPI 入口

backend/main.py

python 复制代码

from fastapi import FastAPI
from routes import ocr, auth, history
from database import engine, Base

# 初始化数据库
Base.metadata.create_all(bind=engine)

app = FastAPI()

# 注册 API 路由
app.include_router(ocr.router)
app.include_router(auth.router)
app.include_router(history.router)

@app.get("/")
async def root():
    return {"message": "车牌识别 API"}

5.3 车牌识别 API

backend/routes/ocr.py

python 复制代码

from fastapi import APIRouter, UploadFile, File, Form
from services.ocr_service import process_image
import shutil
import os

router = APIRouter(prefix="/ocr", tags=["OCR"])

UPLOAD_FOLDER = "uploads"

@router.post("/recognize")
async def recognize_license_plate(
    file: UploadFile = File(...),
    model: str = Form("paddleocr")  # 默认使用 PaddleOCR
):
    file_path = f"{UPLOAD_FOLDER}/{file.filename}"
    
    # 保存上传的图片
    with open(file_path, "wb") as buffer:
        shutil.copyfileobj(file.file, buffer)
    
    # 进行 OCR 识别
    plate_number = process_image(file_path, model)
    
    return {"filename": file.filename, "plate_number": plate_number, "model": model}

5.4 车牌识别服务

backend/services/ocr_service.py

python 复制代码

from paddleocr import PaddleOCR
from hyperlpr import HyperLPR
import cv2

ocr_paddle = PaddleOCR(use_angle_cls=True, lang="ch")

def process_image(image_path: str, model: str):
    image = cv2.imread(image_path)

    if model == "paddleocr":
        result = ocr_paddle.ocr(image_path, cls=True)
        plate_number = result[0][0][1][0] if result else "未识别"
    
    elif model == "hyperlpr":
        result = HyperLPR().Run(image)
        plate_number = result[0][0] if result else "未识别"
    
    return plate_number

6. React 前端开发

6.1 创建 React 项目

bash 复制代码

npx create-vite@latest frontend --template react-ts
cd frontend
npm install antd axios

6.2 车牌识别页面

frontend/src/pages/OCRPage.tsx

tsx 复制代码

import React, { useState } from "react";
import { Upload, Button, Select, message } from "antd";
import axios from "axios";

const OCRPage: React.FC = () => {
    const [image, setImage] = useState<File | null>(null);
    const [model, setModel] = useState("paddleocr");
    const [result, setResult] = useState("");

    const handleUpload = async () => {
        if (!image) {
            message.error("请上传图片！");
            return;
        }

        const formData = new FormData();
        formData.append("file", image);
        formData.append("model", model);

        const response = await axios.post("http://localhost:8000/ocr/recognize", formData);
        setResult(response.data.plate_number);
    };

    return (
        <div>
            <h2>车牌识别</h2>
            <Upload beforeUpload={(file) => { setImage(file); return false; }}>
                <Button>上传图片</Button>
            </Upload>
            <Select value={model} onChange={setModel} style={{ width: 200 }}>
                <Select.Option value="paddleocr">PaddleOCR</Select.Option>
                <Select.Option value="hyperlpr">HyperLPR</Select.Option>
            </Select>
            <Button onClick={handleUpload} type="primary">识别</Button>
            <h3>识别结果: {result}</h3>
        </div>
    );
};

export default OCRPage;

7. 运行与部署

7.1 启动后端

bash 复制代码

uvicorn main:app --reload --host 0.0.0.0 --port 8000

7.2 启动前端

bash 复制代码

cd frontend
npm run dev

7.3 Docker 部署

docker-compose.yml

yaml 复制代码

version: '3.8'
services:
  backend:
    build: ./backend
    ports:
      - "8000:8000"
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"

bash 复制代码

docker-compose up -d

8. 结论

🎯 基于 FastAPI + React + PaddleOCR/HyperLPR 构建车牌号识别网站

✅ 支持上传图片并自动识别车牌

✅ 支持多种 OCR 车牌识别模型

✅ 支持 API 交互，前后端分离

✅ 支持数据库存储识别历史

✅ 可容器化部署，支持 Docker

🚀 完整的车牌识别网站搭建完成！ 🚗💨