如何在Flask中利用Pandas实现CSV列名动态填充下拉菜单

你当前的代码存在两个核心问题：

1. GET 请求访问 /upload 时，未传递 col_names 变量，模板中的循环因变量未定义无法生成下拉选项；
2. 上传文件后返回模板时，文件数据未留存，后续提交列选择时无法关联原文件，且流程未区分「上传文件」和「提交列选择」两个操作。

以下是修正后的完整实现：

修正后的 app.py #

from flask import Flask, render_template, request, session
import pandas as pd
import os

app = Flask(__name__)
app.secret_key = 'your-custom-secret-key'  # 必填，用于session加密

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/upload', methods=['GET', 'POST'])
def upload():
    # 从session读取已存储的列名，默认空列表
    col_names = session.get('col_names', [])
    
    if request.method == 'POST':
        # 判断是否是提交列选择的请求
        if 'col1' in request.form:
            col1 = request.form['col1']
            col2 = request.form['col2']
            col3 = request.form['col3']
            
            # 这里添加你的业务逻辑，比如读取暂存文件并处理列数据
            # 示例：打印选中的列名
            print(f"选中列：{col1}, {col2}, {col3}")
            return f"列映射完成：{col1} → col1，{col2} → col2，{col3} → col3"
        
        # 否则是上传文件的请求
        file = request.files.get('file')
        if file and file.filename.endswith('.csv'):
            df = pd.read_csv(file)
            col_names = df.columns.tolist()
            session['col_names'] = col_names  # 列名存入session，避免页面刷新丢失
            
            # 可选：如果需要后续处理文件内容，可暂存文件到临时目录
            temp_dir = 'temp_files'
            os.makedirs(temp_dir, exist_ok=True)
            temp_file_path = os.path.join(temp_dir, file.filename)
            file.save(temp_file_path)
            session['temp_file_path'] = temp_file_path
            
            return render_template('upload.html', col_names=col_names)
        else:
            return "无效文件，请上传CSV格式文件"
    
    # GET请求时，传递已存储的列名到模板
    return render_template('upload.html', col_names=col_names)

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

修正后的 upload.html #

<form action="/upload" method="POST" enctype="multipart/form-data">
    <label for="file">选择CSV文件:</label>
    <input type="file" id="file" name="file" accept=".csv" required><br />
    <button type="submit">上传文件获取列名</button><br /><br />

    {% if col_names %}
        <h3>请映射目标列</h3>
        <label for="col1">列1 (对应变量col1):</label>
        <select id="col1" name="col1" required>
            {% for col in col_names %}
            <option value="{{ col }}">{{ col }}</option>
            {% endfor %}
        </select><br />
        
        <label for="col2">列2 (对应变量col2):</label>
        <select id="col2" name="col2" required>
            {% for col in col_names %}
            <option value="{{ col }}">{{ col }}</option>
            {% endfor %}
        </select><br />
        
        <label for="col3">列3 (对应变量col3):</label>
        <select id="col3" name="col3" required>
            {% for col in col_names %}
            <option value="{{ col }}">{{ col }}</option>
            {% endfor %}
        </select><br />
        
        <button type="submit">确认列映射</button>
    {% else %}
        <p>请先上传CSV文件以加载列名</p>
    {% endif %}
</form>

关键修改说明 #

1. Session 存储：用 session 留存列名和临时文件路径，解决页面刷新后数据丢失的问题；
2. 双POST逻辑：区分「上传文件」和「提交列选择」两个操作，避免请求冲突；
3. 模板条件渲染：仅当列名存在时显示下拉菜单，避免空循环或模板报错；
4. 用户体验优化：添加文件类型限制、必填验证，明确操作步骤。

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