如何在Streamlit中自定义st.file_uploader仅保留浏览文件按钮

一、用稳定CSS选择器隐藏多余元素 #

Streamlit组件类名确实会随版本更新变动，别盯着旧类名死磕，换用data-testid这种更稳定的定位方式，直接把文件名显示区和清除按钮藏起来：

import streamlit as st

# 注入自定义CSS
st.markdown("""
<style>
/* 隐藏文件名显示区域 */
div[data-testid="stFileUploader"] > div:nth-child(1) > div:nth-child(2) {
    display: none;
}
/* 隐藏清除按钮 */
div[data-testid="stFileUploader"] button[title="Clear file"] {
    display: none;
}
</style>
""", unsafe_allow_html=True)

# 渲染上传组件，隐藏默认标签
uploaded_file = st.file_uploader(" ", label_visibility="collapsed")

• data-testid是Streamlit官方预留的测试标识，不会随便变更
• 把label_visibility设为collapsed可以彻底隐藏默认的提示文字
• 如果还没生效，打开浏览器F12查看元素结构，微调选择器的层级即可

二、修复自定义组件的DeltaGenerator错误 #

用JS自定义组件时出现这个错误，大多是因为组件返回的数据格式不符合Streamlit要求，或是渲染逻辑违规操作了DeltaGenerator对象。给你个简化的双向交互示例：

1. 前端JS代码（保存为custom_uploader.js） #

function sendFileData(file) {
    const reader = new FileReader();
    reader.onload = function(e) {
        // 把文件信息转成可序列化的JSON格式传给Streamlit
        Streamlit.setComponentValue({
            name: file.name,
            type: file.type,
            size: file.size,
            content: e.target.result.split(',')[1] // 提取base64编码内容
        });
    };
    reader.readAsDataURL(file);
}

function initComponent() {
    Streamlit.setFrameHeight(40); // 固定组件高度，避免渲染异常
    const uploadInput = document.getElementById("custom-upload");
    uploadInput.addEventListener("change", function(e) {
        if (e.target.files.length > 0) {
            sendFileData(e.target.files[0]);
        }
    });
}

// 监听Streamlit的渲染事件初始化组件
Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, initComponent);

2. Python端调用组件 #

import streamlit as st
import streamlit.components.v1 as components

# 注册自定义组件
custom_uploader = components.declare_component(
    "custom_uploader",
    path="./" # 假设JS文件在当前项目目录下
)

# 渲染组件并获取返回的文件数据
file_info = custom_uploader()

# 处理上传的文件
if file_info:
    st.write(f"已选文件：{file_info['name']}")
    # 把base64内容转回文件对象
    import base64
    import io
    file_content = base64.b64decode(file_info['content'])
    file_obj = io.BytesIO(file_content)

• 绝对不能直接把File对象传给Streamlit，必须转成JSON可序列化的格式
• 组件初始化时一定要调用Streamlit.setFrameHeight，否则会触发渲染异常
• 所有交互都要通过setComponentValue和Python端返回值完成，别直接操作Streamlit的DeltaGenerator对象

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