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

置顶 StevenX5

于 2025-05-15 10:29:16 发布

阅读量367

点赞数 5

CC 4.0 BY-SA版权

分类专栏： AI编程文章标签： flask python 后端 AI编程 html javascript

本文链接：https://blog.youkuaiyun.com/zyq55917/article/details/147976792

AI编程专栏收录该内容

3 篇文章

订阅专栏

摘要

这篇博客详细介绍了如何使用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_dotenv

load_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.filename
            file.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>