如何在PyScript中实现用户上传CSV或Excel文件的简便方案？

我尝试编写HTML/Javascript/PyScript代码，实现让用户上传CSV或Excel文件并供PyScript（如Pandas）使用，但以失败告终。以下是我的尝试代码：

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
        
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    
    <py-config>
        packages = ["pandas"]
    </py-config>
  </head>
  <body>
    <input type="file" id="fileinput" accept=".csv, .xlsx"/>

    <script>
        var test = "test";

        function assignFile(e) {
            // Assign file to js variable
            window.file = e.target.files[0];
            console.log("File assigned")
        }
    </script>

    <py-script>
import pandas as pd
import js
import pyodide
from js import test
js.console.log(test)

def get_file(e):
    js.console.log("Attempting file upload: " + e.target.value)

    # Assign file to a js variable
    js.assignFile(e)
    # Import variable to python
    from js import file

    display(pd.read_csv(file))

get_file_proxy = pyodide.ffi.create_proxy(get_file)

js.document.getElementById("fileinput").addEventListener("change", get_file_proxy)
    </py-script>
  </body>
</html>

注：我知道script部分的代码也可以写在py-script中，但没有这么做。另外，从JS导入file变量时，Pandas报错：Invalid file path or buffer object type: <class 'pyodide.JsProxy'>，但这个具体错误并非重点，我想知道：在PyScript中让用户上传CSV或Excel文件的简单方法是什么？

简单实现方案 #

核心问题是Pandas无法直接处理Pyodide的JsProxy类型文件对象，需要先将其转换为Python可识别的二进制数据格式。以下是简化后的实现，无需额外独立JS代码，直接在PyScript中完成所有逻辑：

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    <py-config>
        packages = ["pandas", "openpyxl"]  <!-- 处理Excel文件需要依赖openpyxl -->
    </py-config>
  </head>
  <body>
    <input type="file" id="fileinput" accept=".csv, .xlsx"/>
    <div id="output"></div>

    <py-script>
import pandas as pd
import js
from pyodide.ffi import create_proxy
from io import BytesIO

async def handle_file_upload(event):
    # 获取上传的文件对象
    file = event.target.files[0]
    if not file:
        return
    
    # 读取文件二进制数据并转换为Python可处理的bytes类型
    array_buffer = await file.arrayBuffer()
    uint8_array = js.Uint8Array.new(array_buffer)
    file_bytes = uint8_array.to_py()
    
    # 根据文件后缀选择对应的读取方法
    file_name = file.name
    try:
        if file_name.endswith('.csv'):
            df = pd.read_csv(BytesIO(file_bytes))
        elif file_name.endswith('.xlsx'):
            df = pd.read_excel(BytesIO(file_bytes), engine='openpyxl')
        else:
            js.console.log("不支持的文件类型，请上传CSV或Excel文件")
            return
        
        # 将DataFrame渲染到页面指定区域
        display(df, target="output")
    except Exception as e:
        js.console.log(f"文件读取失败: {str(e)}")

# 创建事件代理并绑定到文件输入控件
proxy = create_proxy(handle_file_upload)
js.document.getElementById("fileinput").addEventListener("change", proxy)
    </py-script>
  </body>
</html>

关键步骤说明 #

• 文件格式转换：通过file.arrayBuffer()获取文件二进制数据，转换为Python的bytes类型后，用BytesIO包装成Pandas可读取的类文件对象。
• 多文件类型支持：根据文件名后缀自动匹配pd.read_csv或pd.read_excel方法，Excel文件需要依赖openpyxl，已在py-config中声明安装。
• 简化事件处理：直接在PyScript内创建事件代理并绑定到文件输入控件，无需额外编写独立JS函数。

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