如何在 Flask 应用中实现带实时百分比的响应式进度条-html教程-PHP中文网

如何在 Flask 应用中实现带实时百分比的响应式进度条

本文详解如何在 Flask 后端配合前端 JavaScript 实现可实时反馈处理进度的响应式进度条，解决长耗时任务（如批量文件请求与数据处理）中用户等待体验差的问题。核心在于利用 XMLHttpRequest 的 progress 事件监听上传/下载进度，并动态更新 DOM。

本文详解如何在 flask 后端配合前端 javascript 实现可实时反馈处理进度的响应式进度条，解决长耗时任务（如批量文件请求与数据处理）中用户等待体验差的问题。核心在于利用 `xmlhttprequest` 的 `progress` 事件监听上传/下载进度，并动态更新 dom。

在 Flask Web 应用中，当后端执行耗时操作（例如并发请求多个远程文件、解析大 JSON/CSV 数据、复杂计算等），前端若仅显示静态加载图标，会显著降低用户体验。理想方案是展示真实、渐进式、带百分比数字的响应式进度条——但需注意：浏览器原生 XMLHttpRequest 的 progress 事件仅对「可测量传输量」有效，即必须满足两个前提：① 服务端响应头包含 Content-Length；② 响应内容为流式分块输出（Streaming）或上传过程本身可计算进度。

然而，您的当前代码存在一个关键矛盾：您调用的是 GET /process_data（且未指定 type: 'POST'），却在 xhr.upload 中监听上传进度——而 GET 请求没有请求体（upload），因此 upload.progress 永远不会触发。同时，xhr.addEventListener("progress") 监听的是下载进度，但 Flask 默认在视图函数完全执行完毕后才发送完整响应（非流式），导致 evt.lengthComputable 为 false，无法获取 evt.total，进度始终无法计算。

✅ 正确实现路径如下：

1. 后端改造：启用流式响应（Streaming）

Flask 需将耗时逻辑拆解为可逐步 yield 的生成器，并设置正确响应头：

Flask 3.0.2

Flask 3.0.2 是 Flask 的官方历史稳定版本，下载地址使用 PyPI wheel 包直链，适合指定版本安装和项目环境复现。

下载

from flask import Response, stream_with_context
import time

@app.route('/process_data', methods=['POST'])  # 改为 POST，语义更清晰
def process_data():
    def generate():
        # 模拟分阶段处理（实际替换为你的文件请求+解析逻辑）
        steps = [
            ("Fetching file 1...", 0.2),
            ("Parsing data...", 0.3),
            ("Validating results...", 0.3),
            ("Done!", 0.2)
        ]

        total = 0
        for desc, weight in steps:
            time.sleep(1)  # 模拟耗时操作
            total += weight
            # 发送 JSON 格式的进度事件（兼容前端解析）
            yield f"data: {json.dumps({'progress': int(total * 100), 'message': desc})}\n\n"

    return Response(
        stream_with_context(generate()),
        mimetype='text/event-stream',
        headers={
            'Cache-Control': 'no-cache',
            'X-Accel-Buffering': 'no'  # Nginx 关键：禁用缓冲
        }
    )

⚠️ 注意：若部署在 Nginx/Gunicorn，请确保配置 proxy_buffering off; 和 chunked_transfer_encoding on;，否则流式响应会被缓冲。

2. 前端重写：使用 EventSource 接收流式进度

替代不可靠的 XMLHttpRequest.progress，采用标准 Server-Sent Events (SSE)：

<div id="progress-bar">
    <div id="progress" style="width: 0%;">0%</div>
</div>
<br><button onclick="startProcess()">Start Process</button>

<script>
function startProcess() {
    const progressBar = $('#progress');

    // 创建 SSE 连接
    const eventSource = new EventSource('/process_data');

    eventSource.onmessage = function(event) {
        try {
            const data = JSON.parse(event.data);
            const percent = Math.min(100, data.progress || 0);
            const message = data.message || '';

            // 平滑更新进度条
            progressBar
                .css('width', percent + '%')
                .text(percent + '%')
                .attr('title', message); // 悬停显示详情

            if (percent >= 100) {
                eventSource.close();
                setTimeout(() => {
                    alert('Processing completed!');
                    // 这里可发起最终数据拉取：fetch('/get_final_result')
                }, 500);
            }
        } catch (e) {
            console.error('Invalid SSE data:', e);
        }
    };

    eventSource.onerror = function() {
        console.error('SSE connection failed.');
        eventSource.close();
        progressBar.css('width', '0%').text('Error!');
    };
}
</script>

3. CSS 增强：确保响应式与动画流畅

#progress-bar {
    width: 100%;
    max-width: 600px;
    height: 30px;
    background-color: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    margin: 20px auto;
}

#progress {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #2E7D32);
    color: white;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 缓动更自然 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}