2.12.0

Upload 上传 ​

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

基础用法 ​

覆盖前一个文件 ​

用户头像 ​

使用 before-upload 钩子来限制上传文件的格式和大小。

照片墙 ​

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

自定义缩略图 ​

使用 scoped-slot 来改变默认的缩略图模板。

带缩略图的文件列表 ​

文件列表控制 ​

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

拖拽上传 ​

您可以拖拽文件到特定区域来上传。

手动上传 ​

API ​

属性 ​

名称描述类型默认值
action 必填请求 URL。string#
headers请求头。object—
method设置上传请求方法。stringpost
multiple是否允许上传多个文件。booleanfalse
data请求的附加选项。自 v2.3.13 起支持 Awaitable 数据和 Function。object / Function{}
名称上传文件的键名。stringfile
with-credentials是否发送 cookie。booleanfalse
show-file-list是否显示已上传文件列表。booleantrue
drag是否激活拖放模式。booleanfalse
accept可接受的文件类型，当 `thumbnail-mode === true` 时不生效。string''
crossorigin原生属性 crossorigin。枚举—
on-preview点击已上传文件时的钩子函数。Function—
on-remove文件被移除时的钩子函数。Function—
on-success上传成功时的钩子函数。Function—
on-error发生错误时的钩子函数。Function—
on-progress发生进度变化时的钩子函数。Function—
on-change选择文件、上传成功或上传失败时的钩子函数。Function—
on-exceed超出限制时的钩子函数。Function—
before-upload上传前的钩子函数，参数为待上传的文件。如果返回 false 或返回一个被拒绝的 Promise，则会中止上传。Function—
before-remove移除文件前的钩子函数，参数为文件和文件列表。如果返回 false 或返回一个被拒绝的 Promise，则会中止移除。Function—
file-list / v-model:file-list默认已上传的文件。object[]
list-type文件列表的类型。枚举文本
auto-upload是否自动上传文件。booleantrue
http-request覆盖默认的 xhr 行为，允许您实现自己的上传文件请求。FunctionajaxUpload 查看
disabled是否禁用上传。booleanfalse
limit允许上传的最大数量。number—

插槽 ​

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

暴露 ​

名称描述类型
abort取消上传请求。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]>
  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
}

来源 ​

组件 • 样式 • 文档

贡献者 ​