当前位置：首页 > news >正文

用Flask框架实现的单张图片上传功能支持上传后的图片预览

news 来源：原创 2025/5/16 8:42:10

摘要

这篇博客详细介绍了如何使用Flask框架实现单张图片上传功能，并支持上传后的图片预览。内容包括文件上传表单的创建、服务器端文件接收与存储、图片预览的前端实现（如使用JavaScript或Flask静态文件处理），以及安全性考虑（如文件类型验证）。通过示例代码，读者可以快速掌握图片上传与预览的核心实现方法。

在这里插入图片描述

提示词

采用大模型：通义千问（代码模式）

实现一个单张图片上传的Flask项目，要求：
## UI框架
- 采用bootstrap 5.3.x版本
## 页面布局
页面分为上下两个部分，上面部分为图片上传，下面部分为图片浏览。
### 图片上传部分
- 图片选择框
- 图片上传按钮
### 图片浏览部分
- 采用格栅系统排版
- 一行显示4张图片
## 服务器端
- 在.env文件中配置图片路径的环境参数
- 图片文件存放在静态目录下的upload目录中
- 在upload目录创建files.json文件，记录所有已上传的图片，含图片文件名
## 其它
- 页面屏幕居中
- 采用响应式页面设计

输出

为了实现这个单张图片上传的Flask项目，我们需要创建几个文件和目录。以下是完整的项目结构和代码：

项目结构

flask_image_upload/
│
├── .env
├── app.py
├── static/
│   └── upload/
│       └── files.json
└── templates/└── index.html

创建`.env`文件

在.env文件中配置图片路径的环境参数：

UPLOAD_FOLDER=static/upload
FILES_JSON_PATH=static/upload/files.json

创建`app.py`文件

这是Flask应用的主要文件，包含路由、图片上传处理逻辑等。

from flask import Flask, render_template, request, redirect, url_for
import os
import json
from dotenv import load_dotenvload_dotenv()app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = os.getenv('UPLOAD_FOLDER')
app.config['FILES_JSON_PATH'] = os.getenv('FILES_JSON_PATH')if not os.path.exists(app.config['UPLOAD_FOLDER']):os.makedirs(app.config['UPLOAD_FOLDER'])if not os.path.isfile(app.config['FILES_JSON_PATH']):with open(app.config['FILES_JSON_PATH'], 'w') as f:json.dump([], f)def save_file_info(filename):with open(app.config['FILES_JSON_PATH'], 'r+') as f:data = json.load(f)if filename not in data:data.append(filename)f.seek(0)json.dump(data, f, indent=4)@app.route('/', methods=['GET', 'POST'])
def index():if request.method == 'POST':file = request.files.get('file')if file and allowed_file(file.filename):filename = file.filenamefile.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))save_file_info(filename)return redirect(url_for('index'))with open(app.config['FILES_JSON_PATH'], 'r') as f:images = json.load(f)return render_template('index.html', images=images)def allowed_file(filename):return '.' in filename and filename.rsplit('.', 1)[1].lower() in {'png', 'jpg', 'jpeg', 'gif'}if __name__ == '__main__':app.run(debug=True)

创建`templates/index.html`文件

这是前端页面模板，使用Bootstrap 5.3.x进行布局。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Image Upload</title><link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column min-vh-100 justify-content-center align-items-center bg-light"><div class="container"><div class="row mb-4"><div class="col text-center"><h1>Upload an Image</h1><form action="/" method="post" enctype="multipart/form-data"><input type="file" class="form-control form-control-lg mb-2" name="file" accept=".png,.jpg,.jpeg,.gif" required><button type="submit" class="btn btn-primary btn-lg">Upload</button></form></div></div><div class="row row-cols-1 row-cols-md-4 g-4">{% for image in images %}<div class="col"><div class="card h-100"><img src="{{ url_for('static', filename='upload/' + image) }}" class="card-img-top" alt="{{ image }}"><div class="card-body"><p class="card-text">{{ image }}</p></div></div></div>{% endfor %}</div></div><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>