文件上传 Upload

选择或拖拽文件，校验格式、大小与数量，显示上传进度。组件不负责真正的上传：业务代码监听事件拿到 File，自己调用接口并回写状态。

examples/upload/basic.html

试一试

选择文件后会模拟上传 1.5 秒；文件名包含 fail 时模拟失败。选择超过 10MB 或非 PNG/JPG/PDF 的文件会弹出错误提示。

结构与属性

html

<div data-cb-upload data-max-size="10" data-max-files="3"
     data-text-reject-type="仅支持 PNG、JPG、PDF 格式">
  <label data-cb-upload-dropzone class="… data-dragging:border-brand data-dragging:bg-accent/60">
    <input type="file" class="sr-only" accept=".png,.jpg,.pdf" multiple />
    …
  </label>
  <ul data-cb-upload-list class="flex flex-col gap-2"></ul>
</div>

属性	说明
`accept`（写在 input 上）	允许的扩展名或 MIME，脚本会再校验一次
`multiple`（写在 input 上）	是否可多选；未设置时最多 1 个
`data-max-size`	单个文件上限，单位 MB
`data-max-files`	文件数量上限，达到后隐藏上传区域
`data-text-*`	文案：`uploading`、`remove`、`reject-type`、`reject-size`、`reject-count`

接入上传接口

const upload = document.getElementById('license-upload')

upload.addEventListener('cb:upload-add', async ({ detail }) => {
  detail.setStatus('uploading')
  try {
    await api.upload(detail.id, detail.file)
    detail.setStatus('done')
  } catch {
    detail.setStatus('error')
  }
})

upload.addEventListener('cb:upload-remove', ({ detail }) => api.remove(detail.id))

// 被拒绝时默认弹出 Toast；调用 preventDefault() 可改为自定义提示
upload.addEventListener('cb:upload-reject', (event) => {
  event.preventDefault()
  showFieldError(event.detail.reason) // 'type' | 'size' | 'count'
})

// 提交表单前读取文件与状态
CbtisUI.getUploadFiles(upload) // [{ id, file, status }]

状态：ready（已选择）→ uploading → done / error。

使用建议

无障碍

上传区域是 <label> 包裹的 sr-only 文件输入框，键盘可聚焦，按 Space 打开文件选择
删除按钮 aria-label 包含文件名；删除后焦点回到上传区域

与 v2 的差异

v2 现状	规范
上传逻辑与界面耦合在 `KycUpload.vue`	界面与校验由组件负责，上传通过事件交给业务
上传成功图标用品牌蓝	使用 `success` 色
上传区域无键盘焦点样式	`has-focus-visible:ring-3`

文件上传 Upload ​

结构与属性 ​

接入上传接口 ​

使用建议 ​

无障碍 ​

与 v2 的差异 ​

文件上传 Upload

结构与属性

接入上传接口

使用建议

无障碍

与 v2 的差异