『玩转Streamlit』--上传下载文件

Web应用中,文件的上传下载是交互中不可缺少的功能。

因为在业务功能中,一般不会只有文字的交互,资料或图片的获取和分发是很常见的需求。

比如,文件上传可让用户向服务器提交数据,如上传图片分享生活、提交文档用于工作协作等,丰富应用功能。

文件下载则使用户能获取服务器端的资源,像下载软件、报告等,提升用户对应用内容的获取能力,增强用户体验和应用实用性。

本篇介绍如何在Streamlit应用中实现文件的上传下载功能。

1. 上传 st.file_uploader

Streamlit通过st.file_uploader可以很方便的实现文件上传功能。

st.file_uploader实现文件上传时,包括以下的功能:

  1. 本地文件选择:创建一个文件上传组件,然后用户可通过该组件选择本地文件进行上传
  2. 限制文件类型:可以指定允许上传的文件扩展名
  3. 支持多文件上传:能够同时选择并上传多个文件

它的主要参数有:

名称类型说明
labelstr解释文件上传用途的简短标签
type[str]允许上传的文件扩展名数组
accept_multiple_filesbool是否允许同时上传多个文件
keystr组件的唯一标识
helpstr上传文件的提示信息
on_changefunc文件上传时的回调函数
argstuple传递给回调函数的可选参数元组
kwargsdict传递给回调函数的可选参数字典
label_visibilitystr标签的可见性

注意,label_visibility参数是配合label一起使用的,label_visibility只有3种值:

  1. visible:这是默认值,表示正常显示label
  2. hidden:显示空占位符
  3. collapsed:不显示标签或占位符

label参数也支持一些markdown格式,可以让标签内容显示的更加丰富。

下面通过一些示例来演示上传的使用方法:

1.1. 基本使用

在这个示例中,st.file_uploader函数创建了一个文件上传组件,标签为 “选择文件”。

当用户选择并上传文件后,应用程序会显示上传文件的文件名。

import streamlit as st

uploaded_file = st.file_uploader("选择文件:")
if uploaded_file is not None:
    st.write(uploaded_file.name)

1.2. 上传限制

默认情况下,Streamlit 允许上传的文件大小限制为 200MB

如果需要修改这个限制,可以通过配置server.maxUploadSize选项来实现。

例如,要将上传文件大小限制设置为 500MB,可以在Streamlit的配置文件config.toml文件中添加以下配置:

[server]
maxUploadSize = 500

1.3. 允许的文件类型

通过type参数指定允许上传的文件类型。

例如,只允许上传图片文件(pngjpg 格式),可以这样使用:

import streamlit as st

uploaded_file = st.file_uploader("选择图片文件", type=["png", "jpg"])

1.4. 上传多个文件

如果需要允许用户上传多个文件,可以将accept_multiple_files参数设置为True

示例如下:

import streamlit as st

uploaded_files = st.file_uploader("选择多个文件:", accept_multiple_files=True)
for uploaded_file in uploaded_files:
    st.write(uploaded_file.name)

1.5. 文件上传后的回调

上传文件后,可以对文件进行各种处理。

例如,可以读取文件内容、将文件保存到本地、使用文件数据进行计算等。

以下是一个读取上传的 CSV 文件并显示数据的示例:

import streamlit as st
import pandas as pd

uploaded_file = st.file_uploader("选择 CSV 文件:")
if uploaded_file is not None:
    dataframe = pd.read_csv(uploaded_file)
    st.write(dataframe)

2. 下载 st.download_button

Streamlit中一般使用st.download_button来实现文件下载功能。

当用户点击下载按钮时,可以将指定的文件内容下载到本地设备。

这一功能在许多场景中都非常实用,比如让用户下载数据报表、图片、文档等。

st.download_button的主要参数有:

名称类型说明
labelstr解释文件下载用途的简短标签
datastr / bytes / file要下载文件的内容
file_namestr指定下载文件的名称,若未指定则自动生成
mimestr数据的 MIME 类型
keystr组件的唯一标识
helpstr下载文件的提示信息
on_clickfunc按钮点击时的回调函数
argstuple传递给回调函数的可选参数元组
kwargsdict传递给回调函数的可选参数字典
typestr指定按钮类型
iconstr按钮标签旁显示的表情符号或图标

注意,type参数只有3种类型:

  1. primary:背景为应用主色强调
  2. secondary:与背景协调
  3. tertiary:无框无背景纯文本

下面通过一些示例来演示下载的使用方法:

2.1. 基本使用

下面是一个简单的示例,展示如何使用st.download_button下载一个字符串内容的文件。

import streamlit as st

text_contents = "这是一段用来下载的文字。"
st.download_button("下载文本文件:", text_contents)

2.2. 下载 CSV 文件

这个示例中,我们先将DataFrame转换为 CSV 格式的字节数据,然后通过st.download_button提供下载。

import streamlit as st
import pandas as pd

@st.cache_data
def convert_df(df):
    # 缓存转换结果,避免每次重新计算
    return df.to_csv()


df = pd.DataFrame({"col1": [1, 2, 3], "col2": ["a", "b", "c"]})
csv_data = convert_df(df)

st.download_button(
    label="下载 CSV",
    data=csv_data,
    file_name="data.csv",
    mime="text/csv",
)

2.3. 下载图片文件

这个示例中,我们打开一个图片文件,以二进制读取模式读取文件内容,并将其作为data参数传递给下载按钮。

import streamlit as st

with open("image.jpg", "rb") as file:
    btn = st.download_button(
        label="下载图片",
        data=file,
        file_name="image.jpg",
        mime="image/jpeg"
    )

3. 总结

总的来说,Streamlit中的st.file_uploaderst.download_button组件是实现文件交互的关键工具。

使用st.file_uploader时要注意上传大小限制,合理设置标签与键值,处理好文件类型及多文件上传情况。

对于st.download_button,需留意内存占用,准确设置文件内容、名称与MIME类型,考虑按钮样式及回调函数,同时防止应用意外重新运行。

原创作者: wang_yb 转载于: https://www.cnblogs.com/wang_yb/p/18630748
<think>好的,用户之前询问了Monaco Editor的命令,现在又转向比较streamlit-monaco和streamlit-code-editor这两个库。我需要先了解这两个库的区别和各自的优缺点。 首先,用户可能是在开发Streamlit应用时需要嵌入代码编辑器,所以需要选择合适的库。我需要确认这两个库的功能、易用性、依赖以及社区支持情况。 streamlit-monaco是基于Monaco Editor的,而Monaco是VS Code的编辑器,功能强大,支持语法高亮、智能提示等。而streamlit-code-editor可能是一个更轻量级的组件,可能功能较少但简单易用。 接下来,我需要比较它们的核心功能,比如是否支持代码高亮、自动补全、主题定制、多语言支持等。还要看看它们的安装和配置复杂度,是否依赖额外资源,比如streamlit-monaco可能需要加载Monaco的资源,影响加载速度。 另外,用户可能关心社区维护情况,比如GitHub的star数、最近更新时间,是否有活跃的维护者。这会影响长期使用的可靠性。 还要考虑使用场景,如果用户需要复杂的代码编辑功能,比如IDE级别的,那么streamlit-monaco更合适;如果只是简单编辑,streamlit-code-editor可能更合适。 需要检查是否有错误处理、自定义命令支持,以及与其他Streamlit组件的兼容性。比如用户之前提到的Monaco命令,可能在streamlit-monaco中更容易实现。 最后,总结两者的优缺点,给出建议,帮助用户根据具体需求选择。</think>以下是针对 `streamlit-monaco` 与 `streamlit-code-editor` 的详细对比分析: --- ### 一、核心定位对比 | **特性** | **streamlit-monaco** | **streamlit-code-editor** | |-------------------------|-----------------------------------------------|-----------------------------------------------| | **底层技术** | 基于 VS Code 的 Monaco Editor(工业级编辑器) | 基于 CodeMirror 或轻量级实现(轻量化编辑器) | | **目标场景** | 需要复杂代码编辑的 IDE 级场景 | 简单代码/文本展示与基础编辑 | | **功能复杂度** | 高(支持智能提示、语法检查等) | 低(基础高亮+编辑) | --- ### 二、功能特性对比 #### 1. **代码智能支持** - **Monaco**: - ✅ 自动补全(IntelliSense) - ✅ 语法错误检查(Linting) - ✅ 多语言支持(支持 50+ 编程语言) - ✅ 代码折叠/大纲视图 ```python # streamlit-monaco 配置智能提示 monaco_editor(..., language="python", suggest=True) ``` - **Code Editor**: - ❌ 无内置智能提示 - ⚠️ 仅基础语法高亮 #### 2. **自定义能力** - **Monaco**: - ✅ 支持自定义主题(需配置 `theme: "vs-dark"`) - ✅ 可扩展快捷键绑定 - ✅ 支持多光标编辑 ```python # 添加自定义快捷键 commands = [{"command": "editor.action.formatDocument", "keybind": "Ctrl+Shift+F"}] ``` - **Code Editor**: - ⚠️ 主题定制有限 - ❌ 无高级编辑功能 #### 3. **性能表现** | **指标** | **Monaco** | **Code Editor** | |----------------|------------|-----------------| | 初始加载速度 | 较慢(需加载 Monaco 资源) | 快(轻量级) | | 内存占用 | 高(约 5-10MB) | 低(<1MB) | --- ### 三、安装与使用成本 #### 1. **依赖关系** - **Monaco**: ```bash pip install streamlit-monaco # 需要额外加载 Monaco 的静态资源(可能影响 CDN 依赖) ``` - **Code Editor**: ```bash pip install streamlit-code-editor # 无额外依赖 ``` #### 2. **API 复杂度** - **Monaco**: ```python from streamlit_monaco import monaco_editor code = monaco_editor(value="", height=500, language="python", theme="vs-dark") ``` - **Code Editor**: ```python from streamlit_code_editor import code_editor code = code_editor("print('Hello')", language="python") ``` --- ### 四、适用场景推荐 | **场景** | **推荐选择** | **理由** | |---------------------------|----------------------|--------------------------------------------| | 在线 IDE/代码沙盒 | ✅ streamlit-monaco | 依赖智能提示和调试功能 | | 配置参数编辑 | ✅ streamlit-monaco | 需要 JSON/YAML 验证 | | 文档中的代码示例展示 | ✅ streamlit-code-editor | 轻量级且加载快 | | 用户输入简单脚本 | ⚖️ 按需选择 | 若需基础编辑选 Code Editor,复杂功能选 Monaco | --- ### 五、社区生态与维护 | **指标** | **streamlit-monaco** | **streamlit-code-editor** | |------------------------|----------------------------|---------------------------| | GitHub Stars (示例) | ~300 | ~150 | | 最近更新时间 | 2023-08-15(活跃) | 2022-11-20(低活跃) | | 官方文档完整性 | 详细(含 API 示例) | 基础说明 | --- ### 六、已知问题与规避方案 #### **Monaco 的局限性**: 1. **移动端兼容性差** *规避方案*:在移动设备上降级使用 `<textarea>` 2. **资源加载阻塞** *优化方案*:预加载 Monaco 资源包 ```python st.markdown('<script src="monaco-loader.js"></script>', unsafe_allow_html=True) ``` #### **Code Editor 的局限性**: 1. **无版本控制** *规避方案*:自行实现历史记录功能 --- ### 七、迁移成本示例 **从 Code Editor 迁移到 Monaco**: ```python # 原 Code Editor 代码 from streamlit_code_editor import code_editor code = code_editor(content, language="python") # 迁移后 Monaco 代码 from streamlit_monaco import monaco_editor code = monaco_editor(value=content, language="python", height=300) ``` --- ### 总结建议 - **选择 `streamlit-monaco` 如果**: 需要完整的代码编辑功能、智能提示、或构建开发者工具类应用 (*典型用例:在线 Python 调试器*) - **选择 `streamlit-code-editor` 如果**: 仅需轻量级代码展示、简单编辑功能 (*典型用例:展示 API 请求示例*)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值