上传与附件
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 | "" |
multiple | false |
maxBytes | 10485760 |
disabled | false |
事件
ui:files ui:error
INTERACTION NOTES
交互与可访问性
- 拖放之外提供文件选择按钮。
- 文件类型、大小限制与错误用文字说明。
和相似组件的区别
文件选中不等于上传完成;上传成功也不等于 Agent 已读取。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Web Components · 来源核验