Upload 上传

继承el-upload所有属性

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

基础用法

覆盖前一个文件

用户头像

在 before-upload 钩子中限制用户上传文件的格式和大小。

照片墙

使用 list-type 属性来设定文件列表的样式。

自定义缩略图

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

图片列表缩略图

上传文件列表控制

通过 on-change 钩子函数来对上传文件的列表进行控制。

拖拽上传

你可以将文件拖拽到特定区域以进行上传。

手动上传

API

属性

名称	描述	类型	默认值
multiple	是否支持多选文件	boolean	false
name	上传的文件字段名	string	file
accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效）	string	''
on-success	文件上传成功时的钩子	Function (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void	—
before-upload	上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。	Function (rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>	—
before-remove	删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除。	Function (uploadFile: UploadFile, uploadFiles: UploadFiles) => Awaitable<boolean>	—
disabled	是否禁用上传	boolean	false
limit	允许上传文件的最大数量	number	—

插槽

名称	描述	类型
default	自定义默认内容	-
trigger	触发文件选择框的内容	-
tip	提示说明文字	-
file	缩略图模板的内容	object { file: UploadFile }

外部方法

名称	描述	类型
abort	取消上传请求	Function (file: UploadFile) => void
submit	手动上传文件列表	Function () => void
clearFiles	清空已上传的文件列表（该方法不支持在 before-upload 中调用）	Function (status?: UploadStatus[]) => void
handleStart	手动选择文件	Function (rawFile: UploadRawFile) => void
handleRemove	手动移除文件。 file 和rawFile 已被合并。 rawFile 将在 v2.2.0 中移除	Function (file: UploadFile | UploadRawFile, rawFile?: UploadRawFile) => void

类型声明

显示类型声明

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
}

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