如何在Dash中上传多个数据集并展示每个DataFrame的表格？

以下是修改后的完整代码，支持多文件上传并按顺序展示每个数据集的表格：

import base64
import io
import dash
from dash.dependencies import Input, Output
from dash import dcc, html, dash_table
import pandas as pd

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server

colors = {"graphBackground": "#F5F5F5", "background": "#ffffff", "text": "#000000"}

app.layout = html.Div(
    [
        dcc.Upload(
            id="upload-data",
            children=html.Div(["Drag and Drop or ", html.A("Select Files")]),
            multiple=True,
        ),
        html.Div(id="output-data-upload"),
    ]
)

def parse_data(contents, filename):
    content_type, content_string = contents.split(",")

    decoded = base64.b64decode(content_string)
    try:
        if "csv" in filename:
            df = pd.read_csv(io.StringIO(decoded.decode("utf-8")))
        elif "xls" in filename:
            df = pd.read_excel(io.BytesIO(decoded))
        elif "txt" in filename or "tsv" in filename:
            df = pd.read_csv(io.StringIO(decoded.decode("utf-8")), delimiter=r"\s+")
        else:
            return html.Div([f"不支持的文件格式: {filename}"])
    except Exception as e:
        print(e)
        return html.Div([f"处理文件 {filename} 时出错: {str(e)}"])

    return df

@app.callback(
    Output("output-data-upload", "children"),
    [Input("upload-data", "contents"), Input("upload-data", "filename")],
)
def update_table(contents, filenames):
    # 初始化组件列表
    components = []
    
    if contents and filenames:
        # 遍历所有上传的文件
        for content, filename in zip(contents, filenames):
            parsed_result = parse_data(content, filename)
            
            if isinstance(parsed_result, pd.DataFrame):
                # 解析成功，生成表格组件
                file_component = html.Div(
                    [
                        html.H5(filename),
                        dash_table.DataTable(
                            data=parsed_result.to_dict("rows"),
                            columns=[{"name": i, "id": i} for i in parsed_result.columns],
                            page_size=10,  # 分页展示，避免表格过长
                            style_table={"overflowX": "auto"}
                        ),
                        html.Hr(),
                        html.Div("原始内容预览"),
                        html.Pre(
                            content[0:200] + "...",
                            style={"whiteSpace": "pre-wrap", "wordBreak": "break-all"},
                        ),
                    ]
                )
                components.append(file_component)
            else:
                # 解析失败，添加错误提示
                components.append(parsed_result)
    
    return components

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

关键修改说明 #

• 遍历所有上传文件：原代码仅处理第一个文件，现在通过zip(contents, filenames)循环遍历每一对文件内容和文件名，确保所有上传的文件都被处理。
• 处理解析结果分支：修改parse_data函数，当文件格式不支持或解析出错时返回错误提示组件；解析成功则返回DataFrame。在回调函数中判断结果类型，分别生成表格或展示错误信息。
• 构建组件列表：将每个文件对应的表格（或错误提示）收集到列表中，最终返回这个列表，Dash会自动按顺序渲染所有组件，实现依次展示的效果。
• 优化表格体验：添加了page_size和横向滚动样式，避免大表格导致页面过长或内容溢出。

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