NiceGUI 3.0.0 FileUpload API 完整演示

图

代码：

from nicegui import ui
import os
import json

# 创建上传目录
upload_dir = './uploads'
if not os.path.exists(upload_dir):
    os.makedirs(upload_dir)

ui.label('NiceGUI 3.0.0 FileUpload API 完整演示').classes('text-h4 q-mb-md')

# 文件信息展示区域
info_area = ui.column().classes('q-mb-md')

async def comprehensive_upload_handler(e):
    """完整的文件上传处理示例"""
    file = e.file  # UploadEventArguments.file 是 FileUpload 类型
    
    # 清空之前的信息
    info_area.clear()
    
    with info_area:
        ui.label('📋 文件信息').classes('text-h6')
        ui.label(f'文件名: {file.name}')
        ui.label(f'内容类型: {file.content_type}')
        ui.label(f'文件大小: {file.size()} 字节 ({file.size() / 1024:.2f} KB)')
        
        # 根据文件类型选择不同的读取方法
        if file.content_type == 'application/json':
            ui.label('🎯 检测到 JSON 文件，使用 json() 方法读取')
            try:
                json_data = await file.json()
                ui.json(json_data)
            except Exception as ex:
                ui.notify(f'JSON 解析失败: {str(ex)}', color='negative')
                
        elif file.content_type and file.content_type.startswith('text/'):
            ui.label('📝 检测到文本文件，使用 text() 方法读取')
            try:
                text_content = await file.text()
                with ui.card().classes('w-full'):
                    ui.label('文件内容预览:').classes('text-bold')
                    ui.label(text_content[:500] + '...' if len(text_content) > 500 else text_content)
            except Exception as ex:
                ui.notify(f'文本读取失败: {str(ex)}', color='negative')
        
        else:
            ui.label('📁 二进制文件，使用 read() 方法读取')
            try:
                # 对于二进制文件，只显示大小信息
                content = await file.read()
                ui.label(f'成功读取 {len(content)} 字节数据')
            except Exception as ex:
                ui.notify(f'文件读取失败: {str(ex)}', color='negative')
        
        # 保存文件
        ui.label('💾 保存文件').classes('text-h6 q-mt-md')
        try:
            save_path = os.path.join(upload_dir, file.name)
            
            # 方法1: 使用内置 save 方法（推荐）
            await file.save(save_path)
            ui.notify(f'✅ 文件 {file.name} 保存成功！', color='positive')
            ui.label(f'保存路径: {save_path}')
            
            # 方法2: 手动保存（备用方法）
            # content = await file.read()
            # with open(save_path, 'wb') as f:
            #     f.write(content)
            
        except Exception as ex:
            ui.notify(f'❌ 保存失败: {str(ex)}', color='negative')

# 创建增强版上传组件
ui.upload(
    on_upload=comprehensive_upload_handler,
    on_rejected=lambda: ui.notify('文件被拒绝', color='negative'),
    multiple=True,
    max_file_size=10_000_000,  # 10MB 限制
).classes('max-w-full q-mb-md')

# 文件列表展示
ui.label('📂 已上传的文件').classes('text-h6 q-mt-md')
file_container = ui.column()

def refresh_file_list():
    """刷新文件列表"""
    file_container.clear()
    with file_container:
        files = os.listdir(upload_dir)
        if files:
            for filename in files:
                file_path = os.path.join(upload_dir, filename)
                file_size = os.path.getsize(file_path)
                with ui.card().classes('w-full q-mb-sm'):
                    with ui.row().classes('items-center'):
                        ui.icon('insert_drive_file').classes('text-blue-500')
                        ui.label(f'{filename} ({file_size} 字节)')
        else:
            ui.label('暂无文件').classes('text-gray-500')

# 初始加载和刷新按钮
refresh_file_list()
ui.button('🔄 刷新文件列表', on_click=refresh_file_list).classes('q-mt-sm')

# 使用说明
with ui.expansion('📖 使用说明', icon='help').classes('q-mt-md'):
    ui.markdown('''
    ### NiceGUI 3.0.0 FileUpload API 功能：
    
    - **name**: 文件名 (str)
    - **content_type**: 内容类型 (str)  
    - **size()**: 文件大小（字节）
    - **read()**: 读取文件内容为字节
    - **text()**: 读取文件内容为文本
    - **json()**: 读取文件内容为 JSON 字典
    - **iterate()**: 以字节形式遍历文件内容
    - **save(path)**: 将文件内容保存到指定路径
    
    ### 支持的文件类型：
    - JSON 文件：自动解析并显示结构
    - 文本文件：显示内容预览
    - 二进制文件：显示大小信息
    - 图片文件：保存到服务器
    ''')

ui.run()

NiceGUI 3.0.0 FileUpload API 功能：

• name: 文件名 (str)
• content_type: 内容类型 (str)
• size() : 文件大小（字节）
• read() : 读取文件内容为字节
• text() : 读取文件内容为文本
• json() : 读取文件内容为 JSON 字典
• iterate() : 以字节形式遍历文件内容
• save(path) : 将文件内容保存到指定路径

支持的文件类型：

• JSON 文件：自动解析并显示结构
• 文本文件：显示内容预览
• 二进制文件：显示大小信息
• 图片文件：保存到服务器