Upload 上传 ​

通过点击或拖拽上传文件。

基础用法 ​

使用插槽自定义按钮类型与文案。通过 limit 与 on-exceed 限制最大上传数量及超出时的行为。可在 before-remove 钩子中阻止删除。

jpg/png files with a size less than 500KB.
  • uniboot-ui-logo.svg
  • uniboot-ui-logo2.svg

覆盖上一个文件 ​

设置 limit 与 on-exceed，在选择新文件时自动替换上一个文件。

limit 1 file, new file will cover the old file

用户头像 ​

使用 before-upload 限制文件格式与大小。

上传图片

照片墙 ​

使用 list-type 改变文件列表样式。

  • press delete to remove
  • press delete to remove
  • press delete to remove
  • press delete to remove
  • press delete to remove
  • press delete to remove
  • press delete to remove
  • press delete to remove

自定义缩略图 ​

使用作用域插槽自定义默认缩略图模板。

    上传图片

带缩略图的文件列表 ​

jpg/png files with a size less than 500kb

文件列表控制 ​

使用 on-change 钩子控制上传文件列表。

jpg/png files with a size less than 500kb
  • man.png

拖拽上传 ​

将文件拖拽到指定区域即可上传。

Drop file here or click to upload
jpg/png files with a size less than 500kb

上传文件夹 ​

通过 directory 属性启用文件夹上传。

启用后仅可选择文件夹，选中后文件夹内文件会被打平处理。

Drop directory here or click to upload

手动上传 ​

jpg/png files with a size less than 500kb

API ​

属性 ​

名称说明类型默认值
action required上传请求地址string#
headers请求头object—
method上传请求方法stringpost
multiple是否支持多选文件booleanfalse
data上传时附带的额外参数；自 v2.3.13 起支持 Awaitable 数据与函数返回object / Function{}
name上传文件字段名stringfile
with-credentials是否携带 Cookiebooleanfalse
show-file-list是否显示已上传文件列表booleantrue
drag是否启用拖拽上传booleanfalse
accept接受的文件类型，thumbnail-mode === true 时不生效string''
crossorigin原生 crossorigin 属性enum—
on-preview点击已上传文件时的钩子Function—
on-remove移除文件时的钩子Function—
on-success上传成功时的钩子Function—
on-error上传失败时的钩子Function—
on-progress上传进度变化时的钩子Function—
on-change文件状态改变时（选择、成功、失败）的钩子Function—
on-exceed超出 limit 时的钩子Function—
before-upload上传前钩子，参数为待上传文件；返回 false 或返回被拒绝的 Promise 将中止上传Function—
before-remove删除前钩子，参数为文件与文件列表；返回 false 或返回被拒绝的 Promise 将中止删除Function—
file-list / v-model:file-list默认已上传文件列表array[]
list-type文件列表类型enumtext
auto-upload是否选取后自动上传booleantrue
http-request覆盖默认 XHR 行为，自定义上传请求FunctionajaxUpload 实现
disabled是否禁用booleanfalse
limit最大允许上传数量number—
directory是否支持上传文件夹；启用后仅可选择文件夹，文件会被打平booleanfalse

插槽 ​

名称说明类型
default自定义默认内容-
trigger触发文件选择对话框的内容-
tip提示说明内容-
file缩略图模板内容object

暴露 ​

名称说明类型
abort取消上传请求。传入 file 时取消对应上传；不传则取消所有进行中的上传Function
submit手动上传文件列表Function
clearFiles清空文件列表（在 before-upload 钩子中不可用）Function
handleStart手动选择文件Function
handleRemove手动移除文件。file 与 rawFile 已合并；rawFile 将在 v2.2.0 移除Function

类型声明 ​

显示类型声明
ts
type UploadFiles = UploadFile[]

type UploadUserFile = Omit<UploadFile, 'status' | 'uid'> &
  Partial<Pick<UploadFile, 'status' | 'uid'>>

type UploadStatus = 'ready' | 'uploading' | 'success' | 'fail'

type Awaitable<T> = Promise<T> | T

type Mutable<T> = { -readonly [P in keyof T]: T[P] }

interface UploadFile {
  name: string
  percentage?: number
  status: UploadStatus
  size?: number
  response?: unknown
  uid: number
  url?: string
  raw?: UploadRawFile
}

interface UploadProgressEvent extends ProgressEvent {
  percent: number
}

interface UploadRawFile extends File {
  uid: number
  isDirectory?: boolean
}

interface UploadRequestOptions {
  action: string
  method: string
  data: Record<string, string | Blob | [string | Blob, string] | string[]>
  filename: string
  file: UploadRawFile
  headers: Headers | Record<string, string | number | null | undefined>
  onError: (evt: UploadAjaxError) => void
  onProgress: (evt: UploadProgressEvent) => void
  onSuccess: (response: any) => void
  withCredentials: boolean
}