Flask 应用中图片动态更新与上传：实现客户端定时刷新与服务器端文件管理

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Flask 应用中图片动态更新与上传：实现客户端定时刷新与服务器端文件管理

2025-11-29

浏览次数：次

返回列表

flask 应用中图片动态更新与上传：实现客户端定时刷新与服务器端文件管理

本教程详细介绍了如何在 Flask 应用中高效地显示和动态更新图片。内容涵盖 Flask 静态文件服务、HTML 模板中图片路径的正确引用、利用 J*aScript 实现客户端图片定时刷新（包括缓存处理），以及服务器端图片上传处理的完整流程，旨在帮助开发者构建具备图片管理功能的 Web 应用。

1. Flask 基础：静态文件服务与图片显示

在 Flask 应用中，静态文件（如 CSS、J*aScript、图片等）通常通过一个名为 static 的特殊文件夹来提供。在 HTML 模板中，url_for() 函数结合 static 端点是生成静态文件正确 URL 的标准方式。

1.1 项目结构

为了清晰地组织文件，建议采用以下项目结构：

.
├── app.py                  # Flask 主应用文件
├── static
│   └── images
│       └── chart.png       # 示例图片文件
└── templates
    └── chart.html          # HTML 模板文件

1.2 Flask 应用配置与路由

在 app.py 中，我们需要配置静态文件目录，并定义一个路由来渲染包含图片的 HTML 页面。

import os
from flask import Flask, render_template

app = Flask(__name__)

# 配置图片上传目录，该目录位于 'static' 文件夹下
app.config['UPLOAD_FOLDER'] = os.path.join('static', 'images')

@app.route("/")
def running():
    """根路由，简单返回应用运行状态"""
    return "<p>Website running!</p>"

@app.route("/chart")
def show_img():
    """
    显示图片的路由。
    将图片的相对路径（相对于 static 文件夹）传递给模板。
    """
    # 假设图片名为 chart.png，且位于 static/images 目录下
    # url_for('static', ...) 会自动处理 'static/' 部分
    image_path_in_static = os.path.join('images', 'chart.png')
    return render_template("chart.html", user_image=image_path_in_static)

if __name__ == "__main__":
    # 启动 Flask 应用，开启 debug 模式方便开发
    app.run(port=3000, debug=True)

1.3 HTML 模板中的图片引用

在 templates/chart.html 中，使用 url_for() 函数来引用 user_image 变量，确保图片路径正确解析。

Pinokio

Pinokio是一款开源的AI浏览器，可以安装运行各种AI模型和应用

232 查看详情 Pinokio

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态图片展示</title>
</head>
<body>
    <h1>当前图片</h1>
    <!-- 使用 url_for 结合 user_image 变量正确引用图片 -->
    @@##@@
</body>
</html>

此时，访问 http://localhost:3000/chart 路由即可在浏览器中看到 chart.png 图片。

2. 客户端定时刷新图片

当服务器端的图片文件内容发生变化，但文件名保持不变时，浏览器可能会因为缓存机制而继续显示旧图片。为了强制浏览器重新加载最新图片，我们需要利用 J*aScript 定时更新 Chart Image 标签的 src 属性，并在 URL 中添加一个唯一的查询参数（例如时间戳）来“破坏”缓存。

2.1 修改 chart.html 添加 J*aScript 刷新逻辑

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态图片展示</title>
</head>
<body>
    <h1>当前图片</h1>
    @@##@@

    <script>
        // 获取图片元素
        const dynamicImage = document.getElementById('dynamicImage');
        // 获取原始图片路径，用于构建新的 URL。
        // .split('?')[0] 用于移除可能已存在的查询参数。
        const originalSrc = dynamicImage.src.split('?')[0];

        // 每5秒刷新一次图片
        setInterval(() => {
            // 生成一个当前时间戳作为查询参数，强制浏览器重新加载图片，避免缓存
            const newSrc = originalSrc + '?' + new Date().getTime();
            dynamicImage.src = newSrc;
            console.log('Image refreshed:', newSrc);
        }, 5000); // 5000毫秒 = 5秒
    </script>
</body>
</html>

通过上述 J*aScript 代码，每隔 5 秒，浏览器会请求一个新的图片 URL（因为 URL 上的时间戳不同），从而绕过浏览器缓存，显示最新的图片内容。

3. 服务器端图片上传与管理

如果图片是由用户上传或服务器动态生成并需要替换现有文件，我们需要在 Flask 应用中实现文件上传功能。这涉及到接收文件、验证文件类型、安全地保存文件等步骤。

3.1 扩展 app.py：实现文件上传功能

我们需要引入 request, redirect, url_for, flash 和 werkzeug.utils.secure_filename。为了演示目的，我们使用一个全局变量 current_file 来跟踪当前显示的图片，但在生产环境中，应避免使用全局变量，而应采用数据库或会话管理来存储文件信息。

import os
from flask import Flask, render_template, request, redirect, url_for, flash
from werkzeug.utils import secure_filename # 用于安全地处理文件名

app = Flask(__name__)
app.secret_key = 'supersecretkey_for_flash_messages' # flash 消息需要 secret_key

# 配置图片上传目录
UPLOAD_FOLDER = os.path.join('static', 'images')
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'} # 允许的图片扩展名

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER # 将配置赋值给 app.config

# 用于存储当前显示的图片文件名（仅为演示目的，生产环境应避免全局变量）
current_file = 'chart.png' # 默认图片名

def allowed_file(filename):
    """检查文件是否是允许的