Flask + ajax上传文件（三）--图片上传与OCR识别

本教程将详细介绍如何使用Flask框架构建一个图片上传与文字识别(OCR)的Web应用。我们将使用EasyOCR作为OCR引擎，实现一个支持中文和英文识别的完整应用。

环境准备

首先，确保你已经安装了Python 3.7+环境，然后安装必要的依赖库：

pip install flask easyocr pillow werkzeug

项目结构

/flask-ocr-app
├── app.py
├── upload/                # 上传文件保存目录
└── templates/
    └── index.html         # 前端页面
└── static/
    ├── js/                # jQuery等JS文件
    └── css/               # CSS样式文件

代码解析

1. Flask后端关键代码 (app.py)

延迟加载EasyOCR以提高启动速度

# 初始化EasyOCR阅读器（延迟加载）
reader = None
def get_reader():
    global reader
    if reader is None:
        print("正在初始化EasyOCR，首次使用可能需要较长时间...")
        start_time = time.time()
        reader = easyocr.Reader(['ch_sim', 'en'])  # 支持中文简体和英文
        print(f"EasyOCR初始化完成，耗时 {
     time.time() - start_time:.2f}秒")
    return reader

上传图片

@app.route('/upload_image', methods=['POST'])
def upload_image():
    """处理图片上传和OCR识别"""
    try:
        # 安全保存文件
        filename = secure_filename(file.filename)
        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(filepath)

        # 验证是否为有效图片
        try:
            with Image.open(filepath) as img:
                img.verify()
        except Exception as e:
            os.remove(filepath)
            return jsonify({
   'error': '无效的图片文件'}), 400

        # 执行OCR识别
        start_time = time.time()
        ocr_reader = get_reader()
        result = ocr_reader.readtext(filepath, detail=0)  # detail=0只返回文本

        # 清理上传的文件
        os.remove(filepath)

        # 处理识别结果
        text = ' '.join(result)
        print(f"识别完成，耗时 {
     time.time() - start_time:.2f}秒")
        return jsonify({
   'filter': text})

    except Exception as e:
        print(f"识别出错: {
     str(e)}")
        return jsonify({
   'error': '识别过程中出错'}), 500

检查文件扩展名是否允许

def allowed_file(filename):
    allowed_extensions = {
   'png', 'jpg', 'jpeg', 'gif', 'bmp'}
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in allowed_extensions

关键点说明：

1. 延迟加载EasyOCR：由于EasyOCR初始化耗时较长，我们使用延迟加载策略，在第一次使用时才初始化。
2. 文件上传安全处理：
   • 使用secure_filename确保文件名安全
   • 限制文件大小(5MB)
   • 验证文件扩展名
   • 使用Pillow验证图片有效性
3. OCR处理：调用EasyOCR的readtext方法进行识别，detail=0只返回文本内容
4. 资源清理：识别完成后立即删除上传的临时文件

2. 前端页面 (templates/index.html)

HTML结构部分

<div class="container py-4