在 Flask 应用中同时渲染多个上传图片而不替换旧图片-html教程-PHP中文网

在 Flask 应用中同时渲染多个上传图片而不替换旧图片

花韻仙語

发布： 2025-09-01 20:01:01

原创

550人浏览过

在 flask 应用中同时渲染多个上传图片而不替换旧图片

本文档旨在解决 Flask 应用中上传多个图片时，新图片替换旧图片的问题。通过结合 Flask 的 session 功能，我们将展示如何修改 Python 代码和 HTML模板，实现同时显示多个用户上传的图片，从而构建更完善的图像编辑应用。

问题分析

在原代码中，上传图片后，文件名存储在全局变量中，并在 HTML 模板中使用该变量来显示图片。每次上传新图片，全局变量都会被更新，导致页面上只显示最后上传的图片。

解决方案：使用 Flask Session

Flask Session 允许我们在服务器端存储用户特定的数据，并在后续的请求中访问这些数据。我们可以使用 Session 来存储每个上传图片的文件名，并在 HTML 模板中分别显示它们。

代码实现

1. 修改 Python 代码 (app.py)

首先，确保你的 Flask 应用已经安装了 Flask-Session。如果没有，可以使用 pip install Flask-Session 安装。

然后，修改你的 Flask 应用代码，如下所示：

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

app = Flask(__name__)
app.secret_key = "your_secret_key" # 强烈建议修改为你自己的密钥
app.config['UPLOAD_FOLDER'] = 'static/uploads'
app.config['SESSION_TYPE'] = 'filesystem'  # 使用文件系统存储session
#from flask_session import Session #如果使用这种方式，需要去掉下面的注释，并把app.config注释掉
#Session(app) #如果使用这种方式，需要去掉上面的注释，并把app.config注释掉

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

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

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/', methods=['POST'])
def upload_content():
    if not any(f in ['content_file', 'style_file'] for f in request.files):
        flash('No file part')
        return redirect(request.url)

    submitted_file = 'content_file' if 'content_file' in request.files else 'style_file'
    file = request.files[submitted_file]

    if file.filename == '':
        flash('No image selected for uploading')
        return redirect(request.url)

    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        session[submitted_file] = filename
        print('upload_image filename: ' + filename, os.path.join(app.config['UPLOAD_FOLDER'], filename))
        flash('Image successfully uploaded and displayed below')
        return render_template('index.html')
    else:
        flash('Allowed image types are - png, jpg, jpeg, gif')
        return redirect(request.url)


@app.route('/display/<filename>')
def display_image(filename):
    return redirect(url_for('static', filename='uploads/' + filename), code=301)

if __name__ == '__main__':
    app.run(debug=True)

登录后复制

代码解释：

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

查看详情

app.secret_key: 设置 Flask 应用的密钥。 务必替换为你自己的安全密钥。
app.config['SESSION_TYPE'] = 'filesystem': 配置 Session 的存储类型为文件系统。你也可以选择其他存储类型，如 Redis 或数据库。
session[submitted_file] = filename: 将上传的文件名存储到 Session 中。 submitted_file 变量用于区分是内容图片还是样式图片。
if not any(f in ['content_file', 'style_file'] for f in request.files):: 检查是否上传了任何文件。
submitted_file = 'content_file' if 'content_file' in request.files else 'style_file': 确定是哪个文件上传表单提交了文件。

2. 修改 HTML 模板 (index.html)

修改 HTML 模板，从 Session 中获取文件名并显示图片：

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <h2>Select a content image to upload</h2>
            <p>
                {% with messages = get_flashed_messages() %}
                  {% if messages %}
                    <ul>
                    {% for message in messages %}
                      <li>{{ message }}</li>
                    {% endfor %}
                    </ul>
                  {% endif %}
                {% endwith %}
            </p>
            <div>
                {% if session['content_file'] %}
                    <img src="{{ url_for('display_image', filename=session['content_file']) }}">
                {% endif %}
            </div>
            <form method="post" action="/" enctype="multipart/form-data">
                <dl>
                    <p>
                        <input type="file" name="content_file" class="form-control" autocomplete="off" required>
                    </p>
                </dl>
                <p>
                    <input type="submit" value="Submit" class="btn btn-info">
                </p>
            </form>
        </div>

        <div class="row">
            <h2>Select a style image to upload</h2>
            <p>
                {% with messages = get_flashed_messages() %}
                  {% if messages %}
                    <ul>
                    {% for message in messages %}
                      <li>{{ message }}</li>
                    {% endfor %}
                    </ul>
                  {% endif %}
                {% endwith %}
            </p>
            <div>
                {% if session['style_file'] %}
                    <img src="{{ url_for('display_image', filename=session['style_file']) }}">
                {% endif %}
            </div>
            <form method="post" action="/" enctype="multipart/form-data">
                <dl>
                    <p>
                        <input type="file" name="style_file" class="form-control" autocomplete="off" required>
                    </p>
                </dl>
                <p>
                    <input type="submit" value="Submit" class="btn btn-info">
                </p>
            </form>
        </div>
    </div>
</body>
</html>

登录后复制

代码解释：

name="content_file" 和 name="style_file": 修改了上传表单中文件输入框的 name 属性，以便在 Python 代码中区分上传的文件类型。
{% if session['content_file'] %} 和 {% if session['style_file'] %}: 只有当 Session 中存在相应的文件名时，才显示图片。
url_for('display_image', filename=session['content_file']) 和 url_for('display_image', filename=session['style_file']): 从 Session 中获取文件名，并生成正确的图片 URL。

总结

通过使用 Flask Session，我们可以轻松地在多个请求之间存储和访问数据，从而实现更复杂的功能，例如同时显示多个上传图片。这种方法避免了使用全局变量，使代码更清晰、更易于维护。

注意事项

安全性: 务必设置一个安全的 secret_key，以保护 Session 数据的安全。
Session 存储: 选择合适的 Session 存储类型，根据你的应用需求和服务器环境进行选择。文件系统存储适用于开发和小型应用，对于大型应用，建议使用 Redis 或数据库等更可靠的存储方式。
错误处理: 添加更完善的错误处理机制，例如处理 Session 中不存在文件名的错误。
文件大小限制: 根据实际需求，限制上传文件的大小，以防止服务器资源被滥用。

通过以上步骤，你就可以在 Flask 应用中同时渲染多个上传图片，而不会替换之前的图片。

以上就是在 Flask 应用中同时渲染多个上传图片而不替换旧图片的详细内容，更多请关注php中文网其它相关文章！