Upload

Upload files by clicking or drag-and-drop.

Basic Usage

Cover Previous File

User Avatar

Use before-upload hook to limit the upload file format and size.

Photo Wall

Use list-type to change the fileList style.

Custom Thumbnail

Use scoped-slot to change default thumbnail template.

File List with Thumbnail

File List Control

Use on-change hook function to control upload file list.

Drag to Upload

You can drag your file to a certain area to upload it.

Manual Upload

API

Attributes

NameDescriptionTypeDefault
action requiredrequest URL.string#
headersrequest headers.object
methodset upload request method.stringpost
multiplewhether uploading multiple files is permitted.booleanfalse
dataadditions options of request. support Awaitable data and Function since v2.3.13.object / Function{}
namekey name for uploaded file.stringfile
with-credentialswhether cookies are sent.booleanfalse
show-file-listwhether to show the uploaded file list.booleantrue
dragwhether to activate drag and drop mode.booleanfalse
acceptaccepted file types, will not work when thumbnail-mode === true.string''
crossoriginnative attribute crossorigin.enum
on-previewhook function when clicking the uploaded files.Function
on-removehook function when files are removed.Function
on-successhook function when uploaded successfully.Function
on-errorhook function when some errors occurs.Function
on-progresshook function when some progress occurs.Function
on-changehook function when select file or upload file success or upload file fail.Function
on-exceedhook function when limit is exceeded.Function
before-uploadhook function before uploading with the file to be uploaded as its parameter. If false is returned or a Promise is returned and then is rejected, uploading will be aborted.Function
before-removehook function before removing a file with the file and file list as its parameters. If false is returned or a Promise is returned and then is rejected, removing will be aborted.Function
file-list / v-model:file-listdefault uploaded files.object[]
list-typetype of file list.enumtext
auto-uploadwhether to auto upload file.booleantrue
http-requestoverride default xhr behavior, allowing you to implement your own upload-file's request.FunctionajaxUpload see
disabledwhether to disable upload.booleanfalse
limitmaximum number of uploads allowed.number

Slots

NameDescriptionType
defaultcustomize default content.-
triggercontent which triggers file dialog.-
tipcontent of tips.-
filecontent of thumbnail template.object

Exposes

NameDescriptionType
abortcancel upload request.Function
submitupload the file list manually.Function
clearFilesclear the file list (this method is not supported in the before-upload hook).Function
handleStartselect the file manually.Function
handleRemoveremove the file manually. file and rawFile has been merged. rawFile will be removed in v2.2.0.Function

Type Declarations

Show declarations
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
}

Source

ComponentDocs

Contributors