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

在 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, sessionfrom werkzeug.utils import secure_filenameimport osimport cv2app = 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/')def display_image(filename):    return redirect(url_for('static', filename='uploads/' + filename), code=301)if __name__ == '__main__':    app.run(debug=True)

代码解释:

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 中获取文件名并显示图片:

    Image Upload    

Select a content image to upload

{% with messages = get_flashed_messages() %} {% if messages %}

    {% for message in messages %}
  • {{ message }}
  • {% endfor %}
{% endif %} {% endwith %}

{% if session['content_file'] %} @@##@@ {% endif %}

Select a style image to upload

{% with messages = get_flashed_messages() %} {% if messages %}

    {% for message in messages %}
  • {{ message }}
  • {% endfor %}
{% endif %} {% endwith %}

{% if session['style_file'] %} @@##@@ {% endif %}

代码解释:

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 应用中同时渲染多个上传图片而不替换旧图片在 Flask 应用中同时渲染多个上传图片而不替换旧图片

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1574563.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月22日 16:25:15
下一篇 2025年12月22日 16:25:26

相关推荐

  • 实现动态表格布局与固定页脚:Flexbox解决方案

    本文将指导您如何通过CSS Flexbox布局解决网页中表格内容动态变化导致页脚上移的问题,并优化表格在无数据时的显示效果。我们将详细讲解Flexbox的核心属性,并提供示例代码,确保页脚始终保持在页面底部,同时提升用户体验。 1. 理解动态内容与页脚定位的挑战 在构建包含动态数据(如可删除行的表格…

    2025年12月22日
    000
  • 在CDN环境下为Element Plus启用暗黑模式

    Element Plus 暗黑模式 CDN 示例 Element Plus 暗黑模式示例 {{ message }} 卡片标题 这是一段卡片内容,用于展示暗黑模式下的组件样式。 const App = { data() { return { message: “在暗黑模式下”…

    2025年12月22日
    000
  • CSS布局:实现按钮与输入框的并排布局(Flexbox最佳实践)

    本教程详细阐述如何将按钮放置在输入框的左侧,通过调整HTML结构和运用CSS Flexbox布局实现简洁高效的并排显示。文章将指导读者优化元素顺序,利用Flexbox的强大能力简化对齐过程,并识别及移除冗余的CSS样式,确保布局的清晰与可维护性。 传统布局的挑战与问题分析 在网页布局中,将多个元素(…

    2025年12月22日
    000
  • Vue应用中为动态标题添加外部超链接的实现指南

    本教程详细阐述如何在Vue.js应用中,为动态渲染的标题(例如作品集项目标题)集成外部超链接。核心方法是通过在 标签内,使用标签包裹Vue数据绑定表达式,并直接指定外部URL作为href属性值,从而实现标题的点击跳转功能,同时兼顾用户体验和安全性。 问题场景与现有结构分析 在vue.js开发中,展示…

    2025年12月22日
    000
  • jQuery动态更新H1内嵌套元素内容的最佳实践

    本文旨在解决使用jQuery动态更新包含嵌套元素(如标签)的 标签内容时,可能出现的样式丢失问题。核心在于避免将新的 标签错误地嵌套在现有 内部,而是应直接更新目标 元素的内部HTML内容,同时保留嵌套元素的原有结构和样式类,确保内容更新的正确性和样式的完整性。 理解问题:H1嵌套与样式丢失 在使用…

    2025年12月22日
    000
  • 使用 CSS Grid 创建固定 3×3 网格并实现滚动效果

    本文将介绍如何使用 CSS Grid 布局创建一个固定显示的 3×3 网格,同时将超出网格范围的元素放置在右侧,并提供横向滚动条以便访问这些元素。这种布局方式适用于需要在有限空间内展示核心内容,同时提供更多内容供用户浏览的场景。 实现原理 核心思路是利用 CSS Grid 的 grid-a…

    2025年12月22日
    000
  • 使用 HTML5 验证并使用 Ajax 发送表单数据

    本教程旨在解决 HTML 表单在提交前进行客户端验证,并使用 Ajax 将数据以 JSON 格式发送到服务器的问题。我们将探讨如何利用 HTML5 内置的验证功能简化验证流程,并使用 XMLHttpRequest 对象异步发送数据,避免页面刷新。本教程提供详细的代码示例和解释,帮助开发者高效地实现表…

    2025年12月22日
    000
  • htm如何设置动态_在HTM文件中添加动态效果

    使用CSS和JavaScript可在HTML文件中实现动态效果。1. CSS通过@keyframes、transition和transform添加动画,如元素移动、旋转;2. JavaScript响应用户交互,控制元素显示隐藏或动态更新内容;3. 结合二者可触发CSS动画执行,实现点击播放等交互效果…

    2025年12月22日
    000
  • HTML怎么实现表格排序_HTML纯前端表格数据排序的JavaScript实现

    先通过JavaScript获取表格行并转换为数组,再根据点击的列索引进行排序。使用sort()方法比较单元格内容,区分数字和字符串类型,中文采用localeCompare(‘zh’)确保正确排序。每次排序后更新行顺序,并切换升序降序状态。通过sortDirection对象记录…

    2025年12月22日
    000
  • 如何将RGB值转换为十六进制码?手动与自动转换方法介绍

    RGB转十六进制需将红绿蓝各分量转为两位十六进制数并拼接,如RGB(255,99,71)对应#FF6347;可通过手动计算、编程(如JavaScript函数)或在线工具实现,分别适用于理解原理、批量处理和日常便捷使用。 将RGB值转换为十六进制码是网页设计和图形开发中常见的操作。无论是手动计算还是使…

    2025年12月22日
    000
  • HTML注释会被打印出来吗_打印网页时注释的显示行为

    HTML注释在打印时不会显示,因其不参与页面渲染。1. 浏览器解析HTML时将注释存入DOM但不渲染,故无视觉表现;2. 打印基于渲染内容,故注释被忽略;3. 源代码中可见因注释是原始文件一部分;4. 开发者可用其禁用代码、标记结构或协作备注,但不可存放敏感信息;5. 控制打印内容更推荐使用@med…

    2025年12月22日
    000
  • html超链接字体颜色使用CSS修改方法

    通过CSS的a标签color属性可修改超链接字体颜色,需用伪类区分link、visited、hover、active四种状态以提升体验,推荐使用外部或内部样式表定义,如a:link{color:#00F;} a:visited{color:#800080;} a:hover{color:#F00;}…

    2025年12月22日
    000
  • 如何读htm文件_读取HTM文件内容的步骤

    读取HTM文件可通过浏览器查看渲染效果,用文本编辑器查看源码,或用Python等编程语言读取处理。 读取HTM文件其实并不复杂,只要掌握正确的方法和工具。HTM文件是网页的一种格式,本质上是用HTML(超文本标记语言)编写的文本文件,可以通过多种方式打开和查看其内容。 使用浏览器直接打开HTM文件 …

    2025年12月22日
    000
  • Angular 模板中花括号的字面量输出技巧

    本文旨在解决在 Angular 模板中直接输出花括号({})时与 Angular 插值语法冲突的问题。我们将探讨为什么直接使用花括号会导致错误,并提供两种主要解决方案:通过字符串插值 {{ “…” }} 安全地显示包含花括号的字符串,以及利用 HTML 实体进行精…

    2025年12月22日
    000
  • 动态生成带索引的类名:JavaScript 教程

    本文将介绍如何在 JavaScript 中动态地创建带有索引的类名。正如摘要中所述,通过使用模板字面量,我们可以轻松地将变量嵌入到字符串中,从而实现动态类名的创建。 在 JavaScript 中,动态生成类名是一种常见的需求,尤其是在处理循环和动态数据时。例如,你可能需要根据循环的索引来创建不同的类…

    2025年12月22日
    000
  • HTML表格怎么设置斑马纹效果_HTML表格斑马纹样式的CSSnthchild选择器用法

    使用CSS的:nth-child选择器可为HTML表格设置斑马纹,通过tr:nth-child(even)为偶数行添加背景色,结合border-collapse和内边距提升可读性,推荐使用柔和配色并限定tbody范围以避免影响表头样式。 给HTML表格设置斑马纹效果,可以让表格更易读,尤其在数据行较…

    2025年12月22日
    000
  • Angular 11 中 Ng-Popover 自动关闭问题的解决方案

    在 Angular 11 项目中使用 ng-popover 组件时,在 popover 内部集成日期选择器 (ngbDatepicker) 后,选择日期导致 popover 意外自动关闭的问题是一个常见的困扰。本文将深入探讨此问题,并提供有效的解决方案,确保 popover 在日期选择后保持打开状态…

    好文分享 2025年12月22日
    000
  • 从URL中提取子字符串并复制到剪贴板的教程

    本文档旨在提供一个清晰的指南,帮助开发者从URL中提取特定的子字符串(例如,URL参数),并将其复制到剪贴板。我们将使用JavaScript来实现这一功能,并通过示例代码演示如何获取URL中的”code”参数,并将其复制到剪贴板,方便用户使用。 获取URL查询字符串 首先,我…

    2025年12月22日
    000
  • 解决JavaScript中复选框状态获取错误导致UI显示异常的问题

    本教程将深入探讨JavaScript前端开发中一个常见的复选框状态获取错误,即误用.value属性而非.checked属性来判断复选框的选中状态。我们将通过一个实际案例,详细分析错误原因,并提供正确的解决方案,确保用户界面能够根据复选框的真实状态进行准确渲染。 引言 在构建动态web应用时,正确处理…

    2025年12月22日
    000
  • HTML输入框:实现整数范围 [-99, 99] 及可选负号的精确验证

    本教程详细介绍了如何在HTML输入框中实现对整数范围 [-99, 99] 的精确验证,并支持可选的负号。文章提供了两种主要方法:推荐使用 type=”number” 结合 min 和 max 属性进行原生浏览器验证,以及通过 pattern 属性配合正则表达式 -?[0-9]…

    2025年12月22日
    000

发表回复

登录后才能评论
关注微信