uiUI 组件系统
对比

上传与附件

Upload / File Picker

选择文件,并清楚呈现传输进度和失败恢复。

交互预览实时预览

文件由应用通过事件接收,不自动上传。

选择真实本地文件,仅显示名称
使用代码安装指南 ↗
app.mjs
import { mount } from '@sofish/ui/browser';

const view = mount(
  document.querySelector('#example'),
  'upload'
);

view.element.addEventListener('ui:files', event => {
  console.log(event.detail.value);
});

// view.update({ ...nextProps });
// view.destroy();

什么时候用

用户需要提交文档、图片或其他上下文文件。

什么时候不用

只需要已有文件链接时,无需强制重复上传。

COMPONENT API

属性与事件

传入业务数据,通过事件连接你的应用。

属性默认值
label"选择示例文件"
name"attachment"
accept""
multiplefalse
maxBytes10485760
disabledfalse

事件

ui:files ui:error

安装、生命周期与完整 API ↗

INTERACTION NOTES

交互与可访问性

  • 拖放之外提供文件选择按钮。
  • 文件类型、大小限制与错误用文字说明。

和相似组件的区别

文件选中不等于上传完成;上传成功也不等于 Agent 已读取。

RESEARCH & ALTERNATIVES

官方实现映射

以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。

Ant DesignUpload
官方提供

提供选择、拖放、列表和上传状态;服务端验证自行实现。

Element PlusUpload
官方提供

管理文件列表、传输状态与上传请求。

SkeletonFile Upload
官方提供

选择文件与拖放交互,不代表文件已被 Agent 消费。

Ant Design XAttachments
官方提供

管理聊天附件的呈现和操作。

Deep ChatFiles
官方提供

支持文件类型、拖放、相机和录音入口。

关键状态

待选择已选文件上传中失败已取消

React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Web Components · 来源核验

一起了解

提示输入 ↗表单与字段 ↗错误、重试与中断 ↗