Flask应用中动态图片更新与上传教程-html教程-PHP中文网

Flask应用中动态图片更新与上传教程

本教程详细介绍了如何在flask web应用中展示静态图片，并通过javascript实现图片的定时刷新，解决浏览器缓存问题。同时，文章还涵盖了如何在flask后端处理图片上传，并将其与前端展示及刷新机制相结合，提供了一个完整的图片管理与动态显示解决方案。

1. Flask应用中静态图片的基本展示

在Flask应用中展示静态图片是基础操作，通常涉及配置静态文件目录和在HTML模板中正确引用图片。

1.1 Flask后端配置与路由

首先，我们需要一个Flask应用实例，并指定静态文件（如图片）的存放位置。通常，静态文件会放在项目根目录下的 static 文件夹中。

import os
from flask import Flask, render_template, url_for, flash, request, redirect
from werkzeug.utils import secure_filename

# 定义允许上传的文件扩展名
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

app = Flask(__name__)
# 配置上传文件夹，这里我们将图片保存在 static/images 目录下
app.config['UPLOAD_FOLDER'] = os.path.join('static', 'images')
# 设置一个用于演示的秘密密钥，用于flash消息
app.secret_key = 'super_secret_key' 

# 用于存储当前显示的图片文件名，简单演示，生产环境应避免使用全局变量
current_display_image = 'chart.png' # 默认图片

@app.route("/")
def running():
    return "<p>Website running!</p>"

# 检查文件是否允许上传
def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route("/chart")
def show_img():
    # 构造图片在静态目录下的相对路径
    # user_image 变量将传递给模板，用于构建完整的图片URL
    image_path_in_static = os.path.join('images', current_display_image)
    return render_template("chart.html", user_image=image_path_in_static)

# ... (上传路由将在后续章节添加)

if __name__ == "__main__":
    app.run(port=3000, debug=True) # 开启调试模式便于开发

登录后复制

说明：

app.config['UPLOAD_FOLDER'] 设置了图片上传的目录。
show_img 路由负责渲染 chart.html 模板，并将 user_image 变量传递给模板，该变量是图片在 static 目录下的相对路径（例如 images/chart.png）。

1.2 HTML模板中引用图片

chart.html 模板将使用Flask的 url_for 函数来正确引用静态文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态图片展示</title>
</head>
<body>
    <h1>图片展示与刷新</h1>
    <!-- 图片上传表单将在此处添加 -->
    <br>
    @@##@@

    <script>
        // JavaScript代码将在此处添加
    </script>
</body>
</html>

登录后复制

说明：

使用 url_for('static', filename=user_image) 生成图片的完整URL。user_image 是从Flask后端传递过来的 images/chart.png。
id="dynamicImage" 为图片元素添加了一个ID，以便JavaScript可以轻松地选中并操作它。

2. 使用JavaScript实现图片定时刷新

当图片文件名不变，但其内容在服务器端发生更新时，浏览器可能会因为缓存机制而继续显示旧图片。为了强制浏览器加载新图片，我们需要在图片URL中添加一个动态参数（通常是时间戳），使每次请求的URL都不同。

2.1 解决浏览器缓存问题

浏览器会缓存静态资源以提高加载速度。如果图片的URL没有改变，即使服务器上的图片内容已更新，浏览器也可能直接从缓存中读取旧图片。通过在URL后添加一个唯一的查询参数（如 ?timestamp=1678886400000），可以欺骗浏览器认为这是一个全新的资源，从而强制它重新下载。

2.2 JavaScript实现定时刷新

在 chart.html 中添加以下JavaScript代码，实现每5秒刷新一次图片。

iWebShop开源商城系统

iWebShop是一款基于PHP语言及MYSQL数据库开发的B2B2C多用户开源免费的商城系统，系统支持自营和多商家入驻、集成微信商城、手机商城、移动端APP商城、三级分销、视频电商直播、微信小程序等于一体，它可以承载大数据量且性能优良，还可以跨平台，界面美观功能丰富是电商建站首选源码。iWebShop开源商城系统 v5.14 更新日志：新增商品编辑页面规格图片上传优化商品详情页面规格图片与主图切

查看详情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态图片展示</title>
</head>
<body>
    <h1>图片展示与刷新</h1>
    <!-- 图片上传表单将在此处添加 -->
    <br>
    @@##@@

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dynamicImage = document.getElementById('dynamicImage');
            const originalSrc = dynamicImage.src.split('?')[0]; // 获取不带查询参数的原始URL

            setInterval(function() {
                // 构建新的URL，添加当前时间戳作为查询参数，强制浏览器刷新
                const newSrc = originalSrc + '?' + new Date().getTime();
                dynamicImage.src = newSrc;
                console.log('Image refreshed:', newSrc);
            }, 5000); // 每5秒刷新一次
        });
    </script>
</body>
</html>

登录后复制

说明：

document.addEventListener('DOMContentLoaded', ...) 确保在DOM完全加载后再执行JavaScript。
dynamicImage.src.split('?')[0] 获取图片的原始URL，去除任何现有的查询参数。
setInterval(function() { ... }, 5000) 设置一个定时器，每5000毫秒（5秒）执行一次内部函数。
new Date().getTime() 生成一个当前时间戳，作为唯一的查询参数添加到图片URL后。这样，每次定时器触发时，图片的 src 属性都会是一个新的URL，从而强制浏览器重新请求图片。

3. 集成图片上传功能

为了让用户能够上传新的图片，我们需要在Flask后端添加一个文件上传路由，并在前端提供一个上传表单。

3.1 Flask后端上传路由

修改 app.py，添加 /upload 路由来处理文件上传。

import os
from flask import Flask, render_template, url_for, flash, request, redirect, current_app
from werkzeug.utils import secure_filename

ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = os.path.join('static', 'images')
app.secret_key = 'super_secret_key' 

current_display_image = 'chart.png' # 默认图片

@app.route("/")
def running():
    return "<p>Website running!</p>"

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
    global current_display_image # 声明使用全局变量
    if request.method == 'POST':
        # 检查请求中是否有文件部分
        if 'file' not in request.files:
            flash('No file part')
            return redirect(request.url)
        file = request.files['file']
        # 如果用户没有选择文件，浏览器会提交一个没有文件名的空文件
        if file.filename == '':
            flash('No selected file')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            # 使用 secure_filename 确保文件名安全
            filename = secure_filename(file.filename)

            # 为了演示目的，我们总是将上传的图片保存为 'chart.png'
            # 这样前端的刷新机制就能直接获取到更新后的图片
            save_filename = 'chart.png' 

            file_path = os.path.join(app.config['UPLOAD_FOLDER'], save_filename)

            # 如果文件已存在，先删除旧文件
            if os.path.exists(file_path):
                os.remove(file_path)

            file.save(file_path)
            current_display_image = save_filename # 更新当前显示的文件名
            flash(f'File "{filename}" uploaded successfully as "{save_filename}"!')
            # 上传成功后重定向到图片展示页面
            return redirect(url_for('show_img'))
    # GET请求时，重定向到图片展示页面，或者可以渲染一个上传表单页面
    return redirect(url_for('show_img'))

@app.route("/chart")
def show_img():
    # 使用 current_app.config 更具规范性，尤其是在蓝图或多线程环境中
    # full_filename = os.path.join('images', current_display_image) # 原始答案中的写法
    image_path_in_static = os.path.join('images', current_display_image)
    return render_template("chart.html", user_image=image_path_in_static)


if __name__ == "__main__":
    app.run(port=3000, debug=True)

登录后复制

说明：

upload_file 路由处理 POST 请求，接收用户上传的文件。
secure_filename(file.filename) 是 werkzeug 提供的工具，用于清理文件名，防止路径遍历等安全问题。
为了与前端的刷新机制协同，我们将所有上传的图片都保存为 chart.png。这样，每次上传新图片，都会覆盖旧的 chart.png，而前端的JavaScript定时刷新机制会检测到URL变化（通过时间戳），从而加载新的 chart.png 内容。
flash 用于显示一次性消息给用户，需要在模板中配合 get_flashed_messages() 使用。
global current_display_image 声明 current_display_image 是全局变量，以便在函数内部修改它。

3.2 前端上传表单

在 chart.html 中添加一个文件上传表单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态图片展示</title>
    <style>
        /* 简单的样式，让flash消息更明显 */
        .flash-message {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>图片展示与刷新</h1>

    <!-- Flash消息显示区域 -->
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <ul class="flash-message">
        {% for message in messages %}
          <li>{{ message }}</li>
        {% endfor %}
        </ul>
      {% endif %}
    {% endwith %}

    <!-- 图片上传表单 -->
    <form method="post" enctype="multipart/form-data" action="{{ url_for('upload_file') }}">
        <input type="file" name="file" accept="image/*">
        <input type="submit" value="上传新图片">
    </form>
    <br>
    @@##@@

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dynamicImage = document.getElementById('dynamicImage');
            const originalSrc = dynamicImage.src.split('?')[0]; 

            setInterval(function() {
                const newSrc = originalSrc + '?' + new Date().getTime();
                dynamicImage.src = newSrc;
                console.log('Image refreshed:', newSrc);
            }, 5000); 
        });
    </script>
</body>
</html>

登录后复制

说明：

定义了上传表单。enctype="multipart/form-data" 是文件上传的必需属性。
name="file" 对应于Flask后端 request.files['file'] 中的键。
accept="image/*" 提示用户选择图片文件。
{% with messages = get_flashed_messages() %} 是Flask模板中显示 flash 消息的标准方式。

4. 注意事项与最佳实践

current_app 的使用： 在请求上下文中，使用 current_app.config 而不是直接使用 app.config 是更推荐的做法，尤其是在使用蓝图（Blueprints）或多线程/多进程环境中，它能确保访问到正确的应用配置。在本教程的简单示例中，直接使用 app.config 也能工作，但了解 current_app 的存在很重要。
文件上传安全性：
- 始终使用 secure_filename 处理上传的文件名。
- 严格限制 ALLOWED_EXTENSIONS，只允许已知安全的图片格式。
- 对上传文件进行大小限制，防止拒绝服务攻击。
- 考虑将上传的文件存储在应用根目录之外，以提高安全性。
全局变量的局限性： 本教程为了简化演示，使用了全局变量 current_display_image 来存储当前显示的图片文件名。在生产环境中，这会导致问题，因为所有用户都会共享同一个全局变量。更健壮的解决方案包括：
- 将文件名存储在数据库中。
- 将文件名存储在用户会话（session）中（如果每个用户有自己的图片）。
- 使用Redis或其他缓存系统。
更高级的文件上传库： 对于复杂的上传需求（如文件验证、进度条、多文件上传等），推荐使用成熟的第三方库，例如 Flask-Reuploaded (它是 Flask-Uploads 的维护分支)，它提供了更强大的功能和更好的抽象。
图片处理： 如果上传的图片需要缩放、裁剪或添加水印等处理，可以在文件保存后使用 Pillow (PIL Fork) 等库进行处理。