[特殊字符] 基于 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 安装依赖

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

5.2 配置 FastAPI 入口

backend/main.py

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

from fastapi import APIRouter, UploadFile, File, Form
from services.ocr_service import process_image
import shutil
import osrouter = 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

from paddleocr import PaddleOCR
from hyperlpr import HyperLPR
import cv2ocr_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 项目

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

6.2 车牌识别页面

frontend/src/pages/OCRPage.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 启动后端

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

7.2 启动前端

cd frontend
npm run dev

7.3 Docker 部署

docker-compose.yml

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

docker-compose up -d

8. 结论

🎯 基于 FastAPI + React + PaddleOCR/HyperLPR 构建车牌号识别网站
✅ 支持上传图片并自动识别车牌
✅ 支持多种 OCR 车牌识别模型
✅ 支持 API 交互，前后端分离
✅ 支持数据库存储识别历史
✅ 可容器化部署，支持 Docker

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