如何用Jinja2模板与FastAPI上传CSV文件并修改后返回

问题描述 #

我正在使用FastAPI实现CSV文件上传、修改后返回至HTML页面的功能，前端采用HTML，模板引擎使用Jinja2。请问如何通过Jinja2模板完成CSV文件上传、修改并返回给客户端？

修正后端代码（Python） #

原代码存在表单编码缺失、数据格式不利于前端渲染的问题，以下是优化后的实现：

from fastapi.templating import Jinja2Templates
from fastapi import FastAPI, File, UploadFile, Request
from io import BytesIO
import pandas as pd
import uvicorn

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.get("/")
def form_post(request: Request):
    return templates.TemplateResponse('home.html', context={'request': request})

@app.post("/")
def upload(request: Request, file: UploadFile = File(...)):
    # 读取上传的CSV文件
    contents = file.file.read()
    buffer = BytesIO(contents)
    df = pd.read_csv(buffer)
    buffer.close()
    file.file.close()

    # 自定义CSV修改逻辑，示例：新增一列"计算列"，值为第一列的2倍
    if not df.empty:
        df["计算列"] = df.iloc[:, 0] * 2

    # 转换为前端可渲染的表格数据格式
    table_data = {
        "headers": df.columns.tolist(),
        "rows": df.values.tolist()
    }

    return templates.TemplateResponse('home.html', context={'request': request, 'table_data': table_data})

if __name__ == "__main__":
    uvicorn.run(app)

修正前端模板（HTML） #

表单必须指定enctype="multipart/form-data"才能正确上传文件，同时优化结果展示为直观的表格：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>RUL预测</title>
    <style>
        table { border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h1>RUL预测</h1>
    <form method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file" accept=".csv" required/>
        <button type="submit">上传并处理</button>
    </form>

    {% if table_data %}
        <h2>处理后的结果</h2>
        <table>
            <thead>
                <tr>
                    {% for header in table_data.headers %}
                        <th>{{ header }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in table_data.rows %}
                    <tr>
                        {% for value in row %}
                            <td>{{ value }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>请上传CSV文件进行处理</p>
    {% endif %}
</body>
</html>

关键说明 #

1. 表单编码要求：上传文件必须设置enctype="multipart/form-data"，否则后端无法解析文件数据。
2. CSV处理扩展：后端可根据业务需求修改DataFrame，比如过滤无效行、字段格式转换、复杂计算等，示例仅为基础演示。
3. 数据渲染优化：将DataFrame拆分为表头和数据行列表，通过Jinja2循环语法生成HTML表格，比直接输出字典更易读。
4. 资源规范：使用BytesIO读取文件后及时关闭，避免资源泄漏。

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