Flask Web 应用中实现多图片上传与展示-html教程-PHP中文网

Flask Web 应用中实现多图片上传与展示

聖光之護

发布： 2025-09-01 19:38:00

原创

952人浏览过

flask web 应用中实现多图片上传与展示

本文将介绍如何在 Flask Web 应用中实现多图片上传并同时展示的功能。如摘要所述，原始代码存在新图片替换旧图片的问题。为了解决这个问题，我们将采用 Flask 的 session 管理机制，将两个独立的上传方法合并为一个，并在 session 中存储图片文件名。这样，每次上传新图片时，之前的图片信息仍然保留在 session 中，从而实现多图片的同时展示。

解决方案

核心思路是利用 Flask 的 session 对象来存储已上传的图片文件名。通过修改 Python 后端代码，将两个独立的上传视图函数合并为一个，并使用不同的 input 标签名称来区分内容图片和样式图片。同时，在 HTML 模板中，使用 session 中存储的文件名来动态生成图片的 URL。

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

首先，确保已经安装了 Flask 及其相关依赖。如果没有，可以使用以下命令安装：

pip install Flask

登录后复制

然后，修改 app.py 文件，将两个独立的 upload_content 和 upload_style 方法合并为一个，并使用 session 来存储文件名。

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

app = Flask(__name__)
app.secret_key = "super secret key"  # 设置一个密钥，用于 session 加密
app.config['UPLOAD_FOLDER'] = 'static/uploads'
app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif'}

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

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

@app.route('/', methods=['POST'])
def upload_image():
    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)

登录后复制

代码解释:

app.secret_key: 用于加密 session 数据，必须设置。
upload_image 函数: 接收 content_file 或 style_file 两个不同的文件输入，根据不同的输入将文件名存储到 session 中。
session[submitted_file]: 将上传的文件名存储到 session 中，以便在 HTML 模板中使用。

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

接下来，修改 HTML 模板文件 index.html，使用 session 中存储的文件名来动态生成图片的 URL。

Cutout老照片上色

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

查看详情

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</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']) }}" alt="Content Image">
                {% 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']) }}" alt="Style Image">
                {% 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": 两个 input 标签分别用于上传内容图片和样式图片。
{% if session['content_file'] %} 和 {% if session['style_file'] %}: 只有当 session 中存在相应的文件名时，才显示图片。
<img src="{{ url_for('display_image', filename=session['content_file']) }}" alt="Content Image">: 使用 url_for 函数动态生成图片的 URL，从 session 中获取文件名。