在 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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Flask HTML模板中渲染多张图片而不替换现有图片的方法
上一篇 2025年12月22日 16:25:15
Flask Web 应用中实现多图片上传与展示
下一篇 2025年12月22日 16:25:26

相关推荐

  • Deepseek 满血版联合 Scribble Diffusion Pro,绘制专业级图像​

    Deepseek 满血版联合 Scribble Diffusion Pro,绘制专业级图像​Deepseek 满血版联合 Scribble Diffusion Pro,绘制专业级图像​Deepseek 满血版联合 Scribble Diffusion Pro,绘制专业级图像​Deepseek 满血版联合 Scribble Diffusion Pro,绘制专业级图像​

    使用deepseek满血版配合scribble diffusion pro可高效进行专业图像创作。1. scribble diffusion pro是基于草图生成高质量图像的插件,适合已有初步构图的创作者;2. deepseek提供更强文本理解与细节控制能力,提升风格、光影等描述精准度;3. 高效使…

    2026年9月25日 • 用户投稿
    200
  • Debian Apache日志对SEO有何影响

    debian apache日志记录了网站的所有访问请求,包括ip地址、请求类型、响应状态等详细信息。这些日志对于seo有以下几个方面的影响: SEO GPT 免费的白帽SEO,PPC和网站经销商平台 17 查看详情 Apache日志对SEO的重要性 监控网站流量和用户行为:通过分析Apache访问日…

    2026年9月25日
    000
  • Java多态中成员变量是否具有动态绑定特性

    成员变量不具有动态绑定特性,其访问基于引用变量的声明类型而非实际对象类型。例如,当父类和子类存在同名成员变量时,通过父类引用访问该变量将获取父类中的值,即使实际对象是子类实例。这体现了静态绑定,即在编译期确定访问的变量。相比之下,实例方法支持动态绑定(后期绑定),在运行时根据对象的实际类型决定调用哪…

    2026年9月25日
    100
  • 摩尔线程科创板上市 IPO 已过会,冲刺“国产 GPU 第一股”

    摩尔线程科创板上市 IPO 已过会,冲刺“国产 GPU 第一股”摩尔线程科创板上市 IPO 已过会,冲刺“国产 GPU 第一股”摩尔线程科创板上市 IPO 已过会,冲刺“国产 GPU 第一股”摩尔线程科创板上市 IPO 已过会,冲刺“国产 GPU 第一股”

    2025 年 9 月 26 日,上交所官方网站信息显示,摩尔线程智能科技(北京)股份有限公司(简称“摩尔线程”)的科创板 ipo 项目已顺利通过上市委审议,保荐机构为中信证券股份有限公司。 从正式提交申请获上交所受理,到成功过会,摩尔线程历时不足三个月,创下科创板企业上市审核速度的新纪录。本次IPO…

    2026年9月25日 • 用户投稿
    100
  • 2025 上半年中国蓝牙耳机市场份额出炉:小米第一

    2025 上半年中国蓝牙耳机市场份额出炉:小米第一2025 上半年中国蓝牙耳机市场份额出炉:小米第一2025 上半年中国蓝牙耳机市场份额出炉:小米第一2025 上半年中国蓝牙耳机市场份额出炉:小米第一

    根据 idc 最新发布的数据,2025 年上半年中国蓝牙耳机市场出货量约为 5998 万台,同比增长 7.5%。其中,小米以 16.5% 的市场份额位居榜首。值得注意的是,耳夹式耳机在 2025 年上半年的市场规模与增速首次超越耳挂式产品,实现出货量 651 万台,同比增长高达 41.0%。 小米耳…

    2026年9月25日 • 用户投稿
    200
  • Java 中处理货币数据的正确方式

    Java 中处理货币数据的正确方式Java 中处理货币数据的正确方式Java 中处理货币数据的正确方式Java 中处理货币数据的正确方式

    在 Java 应用程序中,尤其是在处理财务数据时,选择正确的数据类型至关重要。货币数据通常以特定的格式呈现,例如包含货币符号(如美元符号 $)和千位分隔符(如逗号 ,)。直接将这些数据映射到 DTO 类时,我们需要仔细考虑数据类型的选择,以避免潜在的精度损失和计算错误。 货币数据类型选择考量 常见的…

    2026年9月25日 • 用户投稿
    000
  • 如何在Debian上检测Nginx SSL状态

    在debian系统上检测nginx的ssl状态,可以通过以下几种方法进行: 使用Nginx命令行工具:打开终端,输入以下命令来检查Nginx的SSL配置是否正确: sudo nginx -t -c /etc/nginx/nginx.conf 这个命令会测试Nginx配置文件的语法是否正确,并且会显示…

    2026年9月25日
    000
  • AI思维导图工具有哪些_好用的AI思维导图工具大全

    AI思维导图工具有哪些_好用的AI思维导图工具大全AI思维导图工具有哪些_好用的AI思维导图工具大全AI思维导图工具有哪些_好用的AI思维导图工具大全AI思维导图工具有哪些_好用的AI思维导图工具大全

    ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ TreeMind树图:新一代AI智能思维导图,一句话生成思维导图 博思白板:博思云创推出的AI多功能白板工具 ProcessOn:在线AI流程图和思维导图制作工具 自由画布:百度文库和百度网盘联…

    2026年9月25日 • 用户投稿
    000
  • 幕布新手入门教程:从零开始创建你的第一个文档

    幕布新手入门教程:从零开始创建你的第一个文档幕布新手入门教程:从零开始创建你的第一个文档幕布新手入门教程:从零开始创建你的第一个文档幕布新手入门教程:从零开始创建你的第一个文档

    首先注册登录幕布账号,进入主界面后点击新建文档并输入标题,通过回车创建节点、Tab键调整层级,利用快捷键提升效率,最后插入待办、加粗、链接等富文本内容完成结构化笔记。 如果您刚刚开始使用幕布,想要快速上手并创建属于自己的第一份结构化文档,可以通过以下步骤完成基础操作。幕布以大纲笔记为核心,帮助用户高…

    2026年9月25日 • 用户投稿
    000
  • Java 中处理货币数据的最佳实践

    Java 中处理货币数据的最佳实践Java 中处理货币数据的最佳实践Java 中处理货币数据的最佳实践Java 中处理货币数据的最佳实践

    本文旨在探讨在 Java 中处理货币数据的最佳实践。面对 JSON 数据中包含的货币值(例如 “$234,205,860″),直接使用 String 存储是一种选择,但可能并非最优。本文将深入分析各种数据类型在处理货币时的优劣,并推荐使用 BigDecimal 进行精确计算,…

    2026年9月25日 • 用户投稿
    000
  • 苹果13pro参数详细参数

    苹果13pro参数详细参数苹果13pro参数详细参数苹果13pro参数详细参数苹果13pro参数详细参数

    iPhone 13 Pro 拥有 1200 万像素的后置广角、超广角和长焦摄像头,以及 1200 万像素的前置摄像头。后置摄像头支持光学图像稳定和电影模式,前置摄像头支持人像模式。手机搭载苹果 A15 仿生芯片,具有 128GB 至 1TB 的存储容量。 ☞☞☞☞点击夸克ai手把手教你,操作像呼吸一…

    2026年9月25日 • 用户投稿
    000
  • 首个开源多模态 Deep Research 智能体,超越多个闭源方案

    首个开源多模态 Deep Research 智能体,超越多个闭源方案首个开源多模态 Deep Research 智能体,超越多个闭源方案首个开源多模态 Deep Research 智能体,超越多个闭源方案首个开源多模态 Deep Research 智能体,超越多个闭源方案

    研究团队 投稿 量子位 | 公众号 QbitAI 首个开源多模态 Deep Research Agent 来了。 整合了网页浏览、图像搜索、代码解释器、内部 OCR 等多种工具,通过全自动流程生成高质量推理轨迹,并用冷启动微调和强化学习优化决策,使模型在任务中能自主选择合适的工具组合和推理路径。 假…

    2026年9月25日 • 用户投稿
    100
  • 【每日收评】集微指数跌0.99%,蔚来宣布完成高速换电千站计划

    【每日收评】集微指数跌0.99%,蔚来宣布完成高速换电千站计划【每日收评】集微指数跌0.99%,蔚来宣布完成高速换电千站计划【每日收评】集微指数跌0.99%,蔚来宣布完成高速换电千站计划【每日收评】集微指数跌0.99%,蔚来宣布完成高速换电千站计划

    ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 7月9日,A股三大指数今日冲高回落,沪指3500点得而复失。截止收盘,沪指跌0.13%,收报3493.05点;深证成指跌0.06%,收报10581.80点;创业板指涨0.16%,收报2184.6…

    2026年9月25日 • 用户投稿
    100
  • 7 月中国电视市场出货量为 186.0 万台 海信、TCL 居前二

    7 月中国电视市场出货量为 186.0 万台 海信、TCL 居前二7 月中国电视市场出货量为 186.0 万台 海信、TCL 居前二7 月中国电视市场出货量为 186.0 万台 海信、TCL 居前二7 月中国电视市场出货量为 186.0 万台 海信、TCL 居前二

    8 月 13 日,洛图科技(runto)发布《中国电视市场品牌出货月度快报》。2025 年 7 月,中国电视市场品牌整机出货量为 186.0 万台,较去年同期下降 14.3%,创下近 13 个月来最大的单月同比跌幅;同时,环比 6 月大幅下降 28.2%。 电视 CNMO 注意到,2025 年 7 …

    2026年9月25日 • 用户投稿
    000
  • Java向上转型中可变参数方法调用的行为解析:重载与编译时绑定的深层机制

    Java向上转型中可变参数方法调用的行为解析:重载与编译时绑定的深层机制Java向上转型中可变参数方法调用的行为解析:重载与编译时绑定的深层机制Java向上转型中可变参数方法调用的行为解析:重载与编译时绑定的深层机制Java向上转型中可变参数方法调用的行为解析:重载与编译时绑定的深层机制

    本文深入探讨Java中向上转型、方法重载与可变参数(varargs)的交互机制。通过具体代码示例,详细解释了在向上转型场景下,为何编译器会基于引用变量的编译时类型来解析方法调用,即使子类存在看似更匹配的重载方法。核心在于方法重载是编译时决策,而可变参数在重载解析中具有较低的优先级。理解这些机制对于编…

    2026年9月25日 • 用户投稿
    000
  • VSCode如何通过SSH连接远程开发 VSCode远程SSH开发的配置与调试技巧

    安装“remote – ssh”扩展是实现vscode远程开发的基础;2. 配置ssh连接需在~/.ssh/config中设置host、hostname、user、port和identityfile等参数以实现快速连接;3. 连接成功后vscode会自动在远程安装vs code serv…

    2026年9月25日
    500
  • EchoMimicV3— 蚂蚁集团推出的多模态数字人视频生成框架

    EchoMimicV3— 蚂蚁集团推出的多模态数字人视频生成框架EchoMimicV3— 蚂蚁集团推出的多模态数字人视频生成框架EchoMimicV3— 蚂蚁集团推出的多模态数字人视频生成框架EchoMimicV3— 蚂蚁集团推出的多模态数字人视频生成框架

    ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 怪兽AI数字人 数字人短视频创作,数字人直播,实时驱动数字人 44 查看详情 EchoMimicV3是什么 echomimicv3是由蚂蚁集团研发的一款高效、多模态、多任务的数字人视频生成框架。…

    2026年9月25日 • 用户投稿
    100
  • sublime怎么实时预览markdown文件 _sublime Markdown实时预览方法

    sublime怎么实时预览markdown文件 _sublime Markdown实时预览方法sublime怎么实时预览markdown文件 _sublime Markdown实时预览方法sublime怎么实时预览markdown文件 _sublime Markdown实时预览方法sublime怎么实时预览markdown文件 _sublime Markdown实时预览方法

    通过安装MarkdownPreview和LiveReload插件,可在Sublime Text中实现Markdown文件的准实时预览:先用Package Control安装插件,配置导出HTML到浏览器,再结合LiveReload实现保存即刷新,最后可设置Ctrl+Alt+M为快捷键,完成高效写作体…

    2026年9月25日 • 用户投稿
    400
  • 如何在Android应用中加入AI功能 Android集成ML Kit的完整教程

    如何在Android应用中加入AI功能 Android集成ML Kit的完整教程如何在Android应用中加入AI功能 Android集成ML Kit的完整教程如何在Android应用中加入AI功能 Android集成ML Kit的完整教程如何在Android应用中加入AI功能 Android集成ML Kit的完整教程

    创建firebase项目并接入android应用:注册应用到firebase控制台,下载配置文件并添加google服务插件。2. 引入ml kit依赖:根据所需功能在build.gradle中添加对应依赖。3. 使用ml kit进行图像处理:以文字识别为例,获取图片、转为inputimage对象、初…

    2026年9月25日 • 用户投稿
    800
  • 奥特曼:我承认 GPT-5 发布搞砸了

    奥特曼:我承认 GPT-5 发布搞砸了奥特曼:我承认 GPT-5 发布搞砸了奥特曼:我承认 GPT-5 发布搞砸了奥特曼:我承认 GPT-5 发布搞砸了

    奥特曼终于承认他搞砸了。 要说最近 AI 圈的大型翻车现场,GPT-5 的发布绝对能排得上号。 为了推广 GPT-5,OpenAI 一声招呼都不打就直接把其他型号给一刀切了,然后在用户的一片吐槽声中又把 GPT-4o 给加了回来。 对此,奥特曼在最近的一次记者晚宴上也干脆利落地承认:没错,GPT-5…

    2026年9月25日 • 用户投稿
    000

发表回复

登录后才能评论
关注微信