Skip to content

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(卡片缩略图墙)stringlist
max最大文件数string0
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 关闭。

基于 MIT OR Apache-2.0 双许可发布