Upload 上传
点击或拖拽选择文件,展示文件列表与上传进度。
基础用法
基础(选择文件)
多选与数量限制
多选 + max
max 限制最多可选文件数,accept 过滤文件类型;超出 max 的文件被拒绝并派发 oas-exceed。
自动上传
自动上传(模拟进度)
auto-upload 时添加文件即自动模拟上传进度,进度条复用 oas-progress。
拖拽上传
拖拽上传
将文件直接拖入虚线区域,松开即添加(支持多选);拖入时区域高亮提示。disabled 时拖拽会显示禁止光标且不接收文件。
照片墙
list-type 控制列表样式:list(默认,文本行)、picture(列表带小缩略图)、picture-card(卡片缩略图墙)。
picture-card 卡片墙
照片墙(picture-card)
图片文件显示缩略图(URL.createObjectURL),非图片显示文件图标与文件名;点击缩略图打开预览浮层(Esc 或点击遮罩关闭),右上角 × 删除,hover 卡片出现预览/删除操作区。
删除、预览与超限拦截
照片墙 · 删除/预览/超限
选择/拖入第 4 张时被 max="3" 拦截,触发 oas-exceed 弹出警告;点击缩略图触发 oas-preview。
picture 列表带缩略图
列表带小缩略图(picture)
已达上限
已达 max 上限(预置满 3 张)
预置满 max="3" 后继续选择会被 oas-exceed 拦截。
禁用
禁用
事件
变化事件
监听 oas-change / oas-remove / oas-upload:
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
accept | 接受的文件类型 | string | — |
auto-upload | 添加后自动模拟上传 | boolean | — |
disabled | 禁用 | boolean | — |
files | 文件列表(property,File[]) | File[] | [] |
list-type | 列表样式:list(默认)/ picture(列表带小缩略图)/ picture-card(卡片缩略图墙) | string | list |
max | 最大文件数 | string | 0 |
multiple | 多选 | boolean | — |
事件
| 事件 | 说明 |
|---|---|
oas-change | 文件列表变化,detail: { files } |
oas-exceed | 添加文件超限被拒绝,detail: { files, max, total } |
oas-preview | 打开预览浮层,detail: { file, url } |
oas-remove | 移除文件,detail: { file, index } |
oas-upload | 上传进度,detail: { file, percent, status } |
键盘:拖拽区 Enter / 空格 打开文件选择;删除按钮可聚焦;预览浮层 Esc 关闭。