本文将介绍如何在 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。
<!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 中获取文件名。
3. 创建上传文件夹
在项目根目录下创建 static/uploads 文件夹，用于存储上传的图片。
mkdir static mkdir static/uploads
运行结果
运行 Flask 应用后，上传图片时，图片会被存储在 static/uploads 文件夹中，并且文件名会被存储在 session 中。HTML 模板会根据 session 中的文件名动态生成图片的 URL，从而实现多图片的同时展示。
注意事项
- 确保 app.secret_key 设置为一个安全的随机字符串。
- UPLOAD_FOLDER 必须存在，并且 Flask 应用具有写入权限。
- ALLOWED_EXTENSIONS 应该根据实际需求进行修改。
- 可以添加错误处理和文件大小限制，以提高应用的健壮性。
总结
通过使用 Flask 的 session 管理，可以轻松实现多图片上传和同时展示的功能。这种方法简化了代码，提高了可维护性，并且避免了新图片替换旧图片的问题。希望本文能够帮助你解决在 Flask Web 应用中处理图片上传的难题。
