v0.1.9

Upload 上传

引入import { LIST_IGNORE, UploadComponent } from '@apollo-design/ui';

文件选择上传和拖拽上传。

何时使用

  • 上传是将信息(网页、文字、图片、视频等)通过网页或者上传工具发布到远程服务器上的过程。
  • 当需要上传一个或一些文件时。
  • 当需要展现上传的进度时。
  • 当需要使用拖拽交互时。

代码演示

加载中…

基本 #

经典款式,用户点击按钮弹出文件选择框。触发控件使用库自身的 Button,上传由本地 mock customRequest 完成,不依赖外网接口。

加载中…

拖拽上传 #

把文件拖入后上传,支持点击选择与批量文件。示例的 customRequest 为本地 mock,随机数以外不依赖任何外部服务。

加载中…

照片墙 #

以卡片形式展示图片缩略图,使用 list-type="picture-card"。缩略图来自本地 data URL,示例不依赖外网图片。

加载中…

限制数量 #

通过 maxCount 限制最多保留的文件数;超出时新文件会替换最早的文件(maxCount={1} 时行为最明显)。

加载中…

类型与大小校验 #

accept 限定文件选择器;beforeUpload 里做真实校验:非图片或超过 1MB 时用 message.error 提示并返回 Upload.LIST_IGNORE,文件不会进入列表。

加载中…

上传前置钩子 #

对比 beforeUpload 的两种拒绝语义:返回 false 时文件仍进入列表但不发送请求;返回 Upload.LIST_IGNORE 时文件被完全忽略。两者都不会产生网络请求。

加载中…

自定义上传 #

用 customRequest 接管上传:示例每 200ms 上报一次 onProgress,到 100% 后调用 onSuccess。真实项目可在此接入自己的请求库、鉴权或分片逻辑。

加载中…

上传失败 #

customRequest 里调用 onError 后,列表项进入 error 状态并保留文件信息,便于用户重试或移除。

加载中…

受控列表 #

用 v-model:file-list 受控管理文件列表:外部按钮可以直接清空列表,页面上的文件数与列表状态始终一致。

加载中…

圆形照片墙 #

list-type="picture-circle" 把缩略图渲染成圆形,常用于头像或头像组场景。

加载中…

文件夹上传 #

设置 directory 后文件选择器以文件夹模式打开,选中的目录会被遍历为多个文件。示例仍由本地 mock 完成上传。

加载中…

粘贴上传 #

pastable 会监听页面粘贴事件,剪贴板中的图片会直接进入上传流程。浏览器需要在用户授权/聚焦的页面中触发粘贴。

加载中…

手动上传 #

customRequest 先把请求挂起,文件保持在 uploading 状态;点击 “Start Upload” 后才逐项推进进度并成功。演示了“先选择、后提交”的受控上传流程。

加载中…

列表操作 #

通过 showUploadList 打开预览、下载与移除按钮,并用 onPreview / onDownload 接管动作。示例用 message 反馈,不真正打开外部链接。

加载中…

头像上传 #

把 Avatar 放进 Upload 作为触发控件,并关闭文件列表,点击头像即可选择文件。

加载中…

组件 Token #

通过 ConfigProvider 的 theme.components.Upload 设置当前组件令牌:pictureCardSize 控制图片卡片尺寸,actionsColor 控制下方文本列表的操作图标颜色。照片墙的遮罩操作维持高对比色。 示例使用本地 data URL 缩略图与 mock 上传,不访问外网;也可通过原生 style 覆盖对应 CSS 变量。

加载中…

默认文件列表 #

用 defaultFileList 提供非受控的初始文件列表,后续变化由组件内部维护;onChange 用于展示最近一次文件状态变化。上传过程由本地 mock customRequest 完成。

加载中…

文件类型图标 #

#iconRender 作用域插槽收到 { file, listType },可按扩展名为文件列表渲染不同图标。示例使用 listType="picture" 且不提供缩略图,因此列表会展示自定义图标。

加载中…

文件预览 #

通过 onPreview 接管文件预览:示例在页面内展示本地 data URL 图片,并提供可访问的「关闭预览」按钮。文件列表的预览图标带有本地化 aria-label,可用键盘操作。

加载中…

语义化样式与类 #

Upload 提供 root / list / item / trigger 四个语义槽。示例为列表和条目设置类名与内联样式,展示「类名拼接、样式覆盖」的用法;上传由本地 mock 完成。

加载中…

上传前转换文件 #

本仓不提供已废弃的 transformFile 属性;等价能力由 beforeUpload 返回新的 File 完成。示例把文件名中的空格替换为连字符并转成小写,再交给 mock 上传。

加载中…

仅限 PNG #

accept="image/png" 只影响文件选择框的过滤,真正的类型校验放在 beforeUpload:非 PNG 文件会提示错误并返回 Upload.LIST_IGNORE,不会进入列表。

加载中…

自定义进度条 #

progress 支持渐变 strokeColor、数字或 CSS 长度 strokeWidth、showInfo 与 ARIA 名称。 本例显示 4px 渐变进度和当前百分比。初始文件从 30% 推进到 100%,新选择的文件通过 mock customRequest 反馈进度;成功事件后收起进度条。

见 demo/(23 个)。

demo 内容
basic 点击上传:v-model:fileList 受控列表 + done/uploading/error 三态
dragger 拖拽上传:UploadDragger 的虚线区 + -drag-hover 态
picture-card 照片墙:listType="picture-card" 缩略图 + 悬浮操作层

裁剪图片、外部 OSS、自定义进度条等场景依赖外部服务或额外能力,暂不提供;上传生命周期、 校验、拖拽/照片墙、手动上传与自定义请求等高频场景均已覆盖。

API

Props

参数 说明 类型 默认值
action 上传地址。为函数时按文件动态返回(可返回 Promise) string | ((file: RcFile) => string | PromiseLike<string>) —
accept 接受的文件类型(string 或 { format, filter: 'native' | (file) => boolean }) string | AcceptConfig —
beforeUpload 上传前钩子。返回 false 阻止上传(仍触发一次 change);返回 LIST_IGNORE 完全忽略;返回 File/Blob/字符串替换上传内容;拒绝的 Promise 也阻止该文件上传 (file: RcFile, fileList: RcFile[]) => void | boolean | string | Blob | Promise<…> —
capture 媒体捕获,透传给原生 input string | boolean —
classNames 语义化类名:{ root, trigger, list, item }(+ 函数形态) UploadSemanticClassNames | ((info) => …) —
customRequest 覆盖默认 XHR;第二参提供 defaultRequest,返回 abort 句柄支持取消 (options, { defaultRequest }) => { abort: () => void } | void —
data 附加表单数据(函数形态按文件求值) object | ((file: RcFile) => object | Promise<object>) {}
defaultFileList 非受控的默认文件列表 UploadFile[] —
directory 支持上传文件夹(走 traverse-file-tree 递归) boolean —
disabled 是否禁用 boolean —
fileList 受控文件列表(与 v-model:fileList 等价) UploadFile[] —
headers 上传请求头(值为 null 的项目会被跳过) Record<string, string | null> —
isImageUrl 覆盖「是否图片」的判定 (file: UploadFile) => boolean 内置判定
listType 列表形态 'text' | 'picture' | 'picture-card' | 'picture-circle' 'text'
maxCount 最大文件数。1 时新文件替换旧文件;超出部分不进列表且不触发 change number —
method 请求方法 string 'post'
multiple 是否多选 boolean false
name 发往服务器的字段名 string 'file'
onPreview 接管预览导航 (file: UploadFile) => void —
onDownload 接管默认下载服务 (file: UploadFile) => void —
onRemove 确认移除;false 阻止删除 (file: UploadFile) => void | boolean | Promise<void | boolean> —
openFileDialogOnClick 点击触发区是否打开文件框 boolean true
pastable 支持从剪贴板粘贴上传(document 级 paste 监听) boolean —
previewFile 生成 picture 族缩略图的自定义实现 (file: File | Blob) => PromiseLike<string> 200×200 居中缩略图
progress 上传列表的进度展示配置,字段见下表 UploadListProgressProps 满宽 2px,隐藏信息
showUploadList 是否展示列表,或 { showPreviewIcon, showRemoveIcon, showDownloadIcon } boolean | ShowUploadListInterface true
type 上传形态。'drag' 等价于使用 UploadDragger 'select' | 'drag' 'select'
withCredentials 跨域请求是否携带 cookie boolean false
class / style 原生 attrs 落外层 wrapper;局部 style 优先于语义 root 样式 — —
hasControlInside 触发区内是否已有可聚焦控件(决定引擎根是否带 role="button" / tabIndex) boolean true
locale 覆盖内置文案 { uploading, removeFile, downloadFile, previewFile } 从 LocaleProvider 取

onPreview(file)、onDownload(file) 是业务服务 Props:提供后分别接管原生预览导航和 默认 window.open 下载。onRemove(file) 是可选确认 Prop,返回 false 或解析为 false 的 Promise 会保留文件。它们不再重复发出同名通知事件。

fileList 代表已接受的列表,update 是提议;父级拒绝不会污染其文件对象,撤去绑定后保留 最后接受的列表。已接受的活动文件被删除或替换时中止请求,迟到回调不会改写新状态。 maxCount 同时排除超额请求。action/data/request 失败只把该文件标为 error,其他批次成员 继续上传。beforeUpload 阻止的文件仍使用含 originFileObj、没有 uploading 状态的 UploadFile 作为 change 载荷。

原生 class/style 落 wrapper,其他原生 attrs/监听器落实际交互触发区,id/name 落真实文件 input。 触发区没有内部控件时支持 Enter/Space;禁用时不进入 Tab 顺序。UploadDragger 转发 Upload 全部插槽、回调、模型事件和 ref;height 设置 wrapper 高度,hasControlInside 默认 false。

进度配置

字段 说明 类型 默认值
strokeColor 纯色、{ from, to } 或百分比色标渐变;渐变方向跟随 RTL string | Record<string, string> 主题进度色
strokeWidth 轨道厚度;数字按 px,字符串使用合法 CSS 长度 number | string 2
showInfo 显示当前百分比信息 boolean false
size 数字为宽高,数组为 [宽, 高];宽度非正时自适应,预设 small/default 的厚度为 6/8px number | [number, number] | 'small' | 'default' [-1, 2]
aria-label 实际进度条的可访问名称;覆盖文件值,未提供时使用文件名 string 文件名称
aria-labelledby 实际进度条所关联的标签 ID;覆盖文件值 string —

数字或数组 size 决定宽高;其余情况下显式 strokeWidth 优先于预设与默认厚度。 部分 progress 对象也保留满宽 2px 的默认值。当前 Provider 的 components.upload.progress 与局部配置浅合并,局部字段优先,动态替换或移除立即生效。

进度值来自 UploadFile.percent,保留有限小数并限制在 0–100,非有限输入按 0。 文件没有 percent 字段时不显示进度,显式 undefined 或 0 表示零进度。 列表项首次挂载后等待 300ms,随后仅在 uploading 状态显示;达到 100% 仍等待上传成功事件。 整行 itemRender 插槽负责其自身内容。该配置不包含 Progress 的 percent/type/status 等其他字段。

事件

事件名 说明 参数
update:fileList 受控更新(v-model:fileList) fileList
change 每次状态推进(uploading / done / error / removed)触发一次;batchStart 时逐文件触发 { file, fileList, event? }
drop 拖拽释放(只走事件通道) DragEvent

插槽

名称 作用域 说明
default — 触发区内容。type="drag" 时落在 -drag-container;picture-card / picture-circle 时作为列表尾部上传按钮
iconRender { file, listType } 自定义列表项图标(原 iconRender prop,已改为 slot)
itemRender { originNode, file, fileList, actions } 自定义列表项整体渲染(原 itemRender prop,已改为 slot)
removeIcon { file } 自定义删除图标(原 showUploadList.removeIcon)
previewIcon { file } 自定义预览图标(原 showUploadList.previewIcon)
downloadIcon { file } 自定义下载图标(原 showUploadList.downloadIcon)
extra { file } 自定义列表项附加内容(原 showUploadList.extra)
appendAction — picture-card/circle 尾部上传触发区内容,保留真实 input 与全部节点;存在的空插槽也优先

Expose

名称 说明
nativeElement 根元素(HTMLElement | null)
fileList 当前文件列表
upload 引擎句柄:abort(fileOrUid?)、uploadFiles(files): Promise、getInputRef()
onBatchStart / onSuccess / onProgress / onError 程序化生命周期方法,通常由内部引擎调用

类型

UploadFile、UploadProps、UploadChangeParam、UploadListType、ItemRender、 ShowUploadListInterface、UploadLocale、UploadRef、UploadSlots、UploadConfig、DraggerProps、RcFile(= File & { uid })、 LIST_IGNORE(beforeUpload 的忽略哨兵值)。

设计说明

  • 自定义请求:customRequest 是替换上传实现的入口;默认使用 XHR + FormData。
  • 列表动效:非 picture 族使用高度展开/收起动效,picture 族使用淡入淡出; motionName = {p}-animate[-inline],并带 2000ms 兜底。
  • 进度与错误提示:列表内联轻量进度条,错误信息通过原生 title 提示。
  • 全局基础样式不注入:名字为裸 <a>、触发区里放原生 <button> 时, 链接色与表单控件归一化取决于使用者自己的全局样式—— 建议配合 任意 CSS reset 使用,或直接用组件库内的 Button / Link。

缩略图在挂载后生成,来源或处理器替换会更新,只保存在本地,不向受控文件写入 thumbUrl。 移除或卸载后忽略迟到结果,并释放内置图片预览的资源。当前 theme.components.Upload 的 令牌 actionsColor/pictureCardSize 会实时消费;原生 CSS 变量可覆盖,默认卡片尺寸跟随 controlHeightLG。

0.0.0 开发版移除没有实际消费者的 supportServerRender/styleAttrs:SSR 直接支持,根样式用 原生 style;无兼容层、无弃用期。

Powered by Vue 3 + ViteApollo Design · Vue NativeGitHub