iter(g82): 文件选择补类型体积数量校验

This commit is contained in:
HIsheR
2026-10-26 13:00:20 +08:00
parent 9dfe9cfac5
commit 37412b31ef
8 changed files with 83 additions and 27 deletions
+7 -6
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T04:57:50.936Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T05:00:02.358Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -1158,6 +1158,8 @@ const sel = signal(''); tree({ nodes: [{ key: 'src', label: 'src', children: [{
- accept:string —— 接受的类型(同原生 accept),如 'image/*,.pdf'
- multiple:boolean —— 允许多选;缺省 false(单选时新选择覆盖旧的)
- hint:string —— 提示文案;缺省「点击或拖拽文件到此处」
- maxSize:number —— 单文件体积上限(字节);超限丢弃并在提示行说明,缺省不限
- maxCount:number —— multiple 时的文件数上限;超出部分丢弃并提示,缺省不限
- disabled:boolean —— 禁用:不可点选、不接受拖拽
- onChange(回调):(files: File[]) => void —— 文件变化回调:选择/拖拽/移除后都触发,回传副本
@@ -1169,11 +1171,10 @@ upload({ multiple: true, accept: 'image/*', hint: '拖拽图片到此处', onCha
手把手:
1. 组件只做「选文件 + 回传」,onChange 里拿 File[] 自行决定上传接口(fetch/FormData 都行)
2. multiple: true 允许多选,重复的文件(同名同大小)自动跳过;单选模式下新选择覆盖旧文件
3. accept 透传原生 accept 限制可选类型,但仍需在 onChange 里二次校验扩展名
4. 键盘:区域可 Tab 聚焦,Enter/空格 打开选择器;拖拽时区域高亮,拖出恢复
5. disabled 时不可点选、不接受拖拽;已选清单的 × 会触发 onChange 回传剩余文件
1. 把 upload 放进表单,accept 限定类型、multiple 允许多选
2. 需要拦体积就给 maxSize(字节),限制数量给 maxCount
3. 被拒的文件不会进清单,原因显示在下方提示行(拖拽与点选走同一套校验)
4. onChange 拿到的 File[] 是副本,自行发请求上传(组件不内置网络层)
现场演示:apps/docs/demo.html#sec-upload