在 Flask 中实现多张图片上传并同时显示-html教程-PHP中文网

在 Flask 中实现多张图片上传并同时显示

碧海醫心

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

原创

285人浏览过

在 flask 中实现多张图片上传并同时显示

在 Flask 应用中实现多张图片上传并同时显示的功能，关键在于正确管理每个上传文件的状态，避免覆盖。以下将详细介绍如何通过结合 Flask 的 session 功能，简化 Python 代码和 HTML 模板，使得多个图片可以独立上传和显示。

使用 Flask Session 管理图片

Flask 的 session 对象允许你在用户会话期间存储数据。这非常适合用于保存上传文件的信息，以便在后续请求中访问。

1. 安装 Flask Session

首先，确保你已经安装了 Flask Session：

pip install Flask-Session

登录后复制

2. 配置 Flask Session

在你的 Flask 应用中，配置 session：

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

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'  # 替换为你自己的密钥
app.config['UPLOAD_FOLDER'] = 'static/uploads'
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
Session(app)

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__':
    os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True) # Ensure upload folder exists
    app.run(debug=True)

登录后复制

代码解释：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

app.config['SECRET_KEY']: 设置一个安全的密钥，用于加密 session 数据。请务必更换为你自己的密钥。
app.config['UPLOAD_FOLDER']: 指定上传文件保存的目录。
Session(app): 初始化 Flask Session。
upload_content() 函数：
- 检查请求中是否包含 content_file 或 style_file。
- 根据上传的文件类型，将其保存在 session 中。

3. 修改 HTML 模板

修改你的 HTML 模板（例如 index.html）以显示多个图片，并使用 session 中存储的文件名：

<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>

登录后复制

代码解释：

{% if session['content_file'] %} 和 {% if session['style_file'] %}: 检查 session 中是否存在相应的文件名，如果存在，则显示图片。
<input type="file" name="content_file" ...> 和 <input type="file" name="style_file" ...>: 为每个文件上传字段使用不同的 name 属性。