使用flask制作一个可以上传图片，展示本地图片的web页面

### 图片上传与展示的功能实现为了实现在 Flask 中完成图片上传以及展示本地存储的图片，可以按照以下方法构建 Web 页面。 #### 1. 创建 HTML 表单以允许用户上传图片通过前端提供一个简单的 HTML 表单，使用户能够选择并上传图片。以下是示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Upload Image</title> </head> <body> <h3>Upload an Image:</h3> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file" accept="image/*"> <input type="submit" value="Upload"> </form> {% if img_url %} <h3>Uploaded Image Preview:</h3> <img src="{{ img_url }}" alt="Uploaded Image" width="300px"> {% endif %} </body> </html> ``` 此表单会将选定的文件发送至 `/upload` 路径，并使用 `POST` 方法提交数据[^1]。 --- #### 2. 后端处理图片上传逻辑在 Flask 应用程序中定义路由来接收上传请求并将图片保存到指定路径。以下是完整的 Python 代码示例： ```python import os from flask import Flask, render_template, request, jsonify, url_for app = Flask(__name__) # 设置图片保存目录 UPLOAD_FOLDER = 'static/uploads' if not os.path.exists(UPLOAD_FOLDER): os.makedirs(UPLOAD_FOLDER) @app.route('/') def index(): return render_template('index.html') @app.route('/upload', methods=['POST']) def upload(): if 'file' not in request.files: return jsonify({'error': 'No file part'}), 400 f = request.files['file'] if f.filename == '': return jsonify({'error': 'No selected file'}), 400 # 构建保存路径 save_path = os.path.join(app.root_path, UPLOAD_FOLDER, f.filename) try: f.save(save_path) # 将文件保存到服务器本地 except Exception as e: return jsonify({'error': str(e)}), 500 # 获取图片访问 URL 并返回给前端 img_url = url_for('static', filename=f'uploads/{f.filename}') return jsonify({'imgurl': img_url, 'code': 200}) ``` 在此部分中，应用设置了图片保存位置为 `static/uploads/` 文件夹，并确保该文件夹存在。当接收到上传请求时，它会验证是否存在有效文件，随后将其保存到服务器上的指定路径[^1]。 --- #### 3. 展示本地存储的图片为了让用户查看已经上传成功的图片，在模板渲染阶段可以通过传递参数的方式显示图片链接。如果需要进一步扩展功能（如浏览所有已上传的图片），可以在数据库或其他持久化机制中记录每张图片的信息。例如，假设我们希望列出所有的上传图片，则可增加如下代码片段： ```python @app.route('/view_images') def view_images(): images = [] uploads_dir = os.path.join(app.root_path, UPLOAD_FOLDER) for filename in os.listdir(uploads_dir): if any(filename.lower().endswith(ext) for ext in ['.png','.jpg','.jpeg','.gif']): img_url = url_for('static', filename=f'uploads/{filename}') images.append(img_url) return render_template('gallery.html', images=images) ``` 对应的 HTML 模板 (`gallery.html`) 可能看起来像这样： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Image Gallery</title> </head> <body> <h3>Uploaded Images:</h3> {% for img_url in images %} <div style="display:inline-block;margin:10px;"> <img src="{{ img_url }}" alt="Uploaded Image" width="200px"> </div> {% endfor %} </body> </html> ``` 这使得用户能够在单独页面上看到他们之前上传的所有图片[^1]。 --- #### 总结以上方案展示了如何基于 Flask 开发具备图片上传和展示能力的应用程序。具体来说，分为三个主要步骤：设计前端界面供用户操作；编写后端脚本负责实际业务流程控制；最后考虑用户体验优化方面的工作，比如集中管理或分类呈现所存档的照片等内容。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

下一篇 ConditionalFormattingRule rule 怎么把这个rule里面的xml转换成字符串类型

目录

使用flask制作一个可以上传图片，展示本地图片的web页面

Python内容推荐

python 实现Flask中返回图片流给前端展示

Python flask框架如何显示图像到web页面

Python - Flask 使用Ajax 实现多文件上传

python 实现图片上传接口开发 并生成可以访问的图片url

Python使用Flask框架同时上传多个文件的方法

Python Web框架Flask下网站开发入门实例

python3 flask实现文件上传功能

Python-使用flask搭建web项目框架

Python中使用Flask、MongoDB搭建简易图片服务器

Python flask框架实现浏览器点击自定义跳转页面

Flask实现图片的上传、下载及展示示例代码

Flask使用Pyecharts在单个页面展示多个图表的方法

yolov5在flask部署网页支持在线上传预测图片与视频功能以及摄像头检测功能

3、Flask boostrap实现图片视频上传下载展示

js读取本地图片进行预览，上传服务器

wanxiaowo:基于flask框架建造的图片展示评论系统

使用pycharm+flask创建一个html网页

利用 Flask 动态展示 Pyecharts 图表数据的几种方法

flask 实现上传图片并缩放作为头像的例子

基于tensorflow和flask的本地图片库web图片搜索引擎【100013183】

202609212009.7z.004 4/8 unity

20260920828.7z.004

鸿蒙OS开发环境搭建.pdf

1984-2026年 税务总局法规文本分税种分行业数据 docx

RAR-ZIP-7Z-压缩包文件密码恢复工具.zip

学生成绩管理系统C++课程设计与实践

别再手动拖拽了！用Lumerical脚本批量创建FDTD仿真结构（附完整代码）

Java邮件解析任务中，如何安全高效地提取HTML邮件内容并避免硬编码、资源泄漏和类型转换异常？

RH公司应收账款管理优化策略研究

新手别慌！用BingPi-M2开发板带你5分钟搞懂Tina Linux SDK目录结构

python 实现图片上传接口开发并生成可以访问的图片url

1984-2026年税务总局法规文本分税种分行业数据 docx