基于Flask实现用户图片上传并展示图片及人物名称的技术问询

我来帮你搞定这个Flask图片上传并展示人物名称的功能，咱们先梳理下现有代码的问题：它只是获取了表单里的文件名，但完全没处理实际的文件上传、保存，也没有人物名称的关联逻辑。下面是完整的解决方案，包含后端代码和前端模板：

1. 后端Flask代码（完整版本） #

这段代码会处理文件上传验证、安全保存，同时接收用户输入的人物名称，最后传递数据给前端模板展示：

import sys
from flask import Flask, request, render_template
import os
from werkzeug.utils import secure_filename

app = Flask(__name__)

# 配置上传文件夹和允许的图片格式
UPLOAD_FOLDER = './static/uploads'
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# 自动创建上传文件夹（如果不存在）
os.makedirs(UPLOAD_FOLDER, exist_ok=True)

def allowed_file(filename):
    """辅助函数：检查文件是否为允许的图片类型"""
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/send', methods=['GET', 'POST'])
def send():
    if request.method == 'POST':
        # 检查请求中是否包含文件
        if 'file' not in request.files:
            return "请求中没有文件部分", 400
        file = request.files['file']
        # 获取用户输入的人物名称，默认值为"Unknown"
        person_name = request.form.get('person_name', 'Unknown')
        
        # 处理用户未选择文件的情况
        if file.filename == '':
            return "未选择任何文件", 400
        
        # 验证文件类型并保存
        if file and allowed_file(file.filename):
            # 安全处理文件名，避免路径遍历攻击
            filename = secure_filename(file.filename)
            file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
            file.save(file_path)
            # 传递图片路径和人物名称到模板
            return render_template('send.html', 
                                   image_url=f'/static/uploads/{filename}',
                                   person_name=person_name)
    
    # GET请求时返回上传表单页面
    return render_template('send.html')

if __name__ == "__main__":
    app.run(debug=True)

2. 前端模板 templates/send.html #

需要在项目根目录下创建templates文件夹（Flask默认读取该目录下的模板），然后新建这个HTML文件，包含上传表单和展示区域：

<!DOCTYPE html>
<html>
<head>
    <title>图片上传与人物展示</title>
    <style>
        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .upload-form {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .form-group {
            margin-bottom: 12px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 4px;
            cursor: pointer;
        }
        .image-display {
            margin-top: 20px;
        }
        .image-display img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>上传图片并标注人物名称</h1>
        
        <!-- 上传表单 -->
        <form class="upload-form" method="POST" enctype="multipart/form-data">
            <div class="form-group">
                <label for="person_name">人物名称:</label>
                <input type="text" id="person_name" name="person_name" required>
            </div>
            <div class="form-group">
                <label for="file">选择图片:</label>
                <input type="file" id="file" name="file" accept="image/*" required>
            </div>
            <button type="submit">上传并展示</button>
        </form>

        <!-- 图片和人物名称展示区域 -->
        {% if image_url %}
        <div class="image-display">
            <h2>人物: {{ person_name }}</h2>
            <img src="{{ image_url }}" alt="{{ person_name }}的照片">
        </div>
        {% endif %}
    </div>
</body>
</html>

3. 功能说明与注意事项 #

• 安全处理：用secure_filename过滤文件名，避免恶意路径遍历；限制仅允许常见图片格式上传。
• 流程逻辑：GET请求返回上传表单，POST请求处理上传，成功后渲染图片和人物名称。
• 依赖安装：确保已安装Flask，执行pip install flask即可完成安装。
• 目录结构：项目最终的目录结构应该是这样的：

  your_project/
  ├── app.py（上面的后端代码）
  ├── templates/
  │   └── send.html
  └── static/
      └── uploads/（自动创建）
  

内容的提问来源于stack exchange，提问作者Manoj