本文将介绍如何在 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, sessionimport osfrom werkzeug.utils import secure_filenameapp = 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/')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。
Image Upload Select a content image to upload
{% with messages = get_flashed_messages() %} {% if messages %}
{% for message in messages %}
{% endif %} {% endwith %}- {{ message }}
{% endfor %}{% if session['content_file'] %} @@##@@ {% endif %}
Select a style image to upload
{% with messages = get_flashed_messages() %} {% if messages %}
{% for message in messages %}
{% endif %} {% endwith %}- {{ message }}
{% endfor %}{% if session['style_file'] %} @@##@@ {% endif %}
代码解释:
name=”content_file” 和 name=”style_file”: 两个 input 标签分别用于上传内容图片和样式图片。{% if session[‘content_file’] %} 和 {% if session[‘style_file’] %}: 只有当 session 中存在相应的文件名时，才显示图片。: 使用 url_for 函数动态生成图片的 URL，从 session 中获取文件名。
3. 创建上传文件夹
在项目根目录下创建 static/uploads 文件夹，用于存储上传的图片。
mkdir staticmkdir static/uploads
运行结果
运行 Flask 应用后，上传图片时，图片会被存储在 static/uploads 文件夹中，并且文件名会被存储在 session 中。HTML 模板会根据 session 中的文件名动态生成图片的 URL，从而实现多图片的同时展示。
注意事项
确保 app.secret_key 设置为一个安全的随机字符串。UPLOAD_FOLDER 必须存在，并且 Flask 应用具有写入权限。ALLOWED_EXTENSIONS 应该根据实际需求进行修改。可以添加错误处理和文件大小限制，以提高应用的健壮性。
总结
通过使用 Flask 的 session 管理，可以轻松实现多图片上传和同时展示的功能。这种方法简化了代码，提高了可维护性，并且避免了新图片替换旧图片的问题。希望本文能够帮助你解决在 Flask Web 应用中处理图片上传的难题。
以上就是Flask Web 应用中实现多图片上传与展示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1574565.html
微信扫一扫 
支付宝扫一扫 
