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

Upload API

Attributes

NameDescriptionTypeDefaultRequired
actionrequest URL.stringYes
headersrequest headers.Headers | Record<string, any>No
methodset upload request method.string'post'No
multiplewhether uploading multiple files is permitted.booleanfalseNo
dataadditions options of request.Record<string, any>No
namekey name for uploaded file.string'file'No
with-credentialswhether cookies are sent.booleanfalseNo
show-file-listwhether to show the uploaded file list.booleantrueNo
dragwhether to activate drag and drop mode.booleanfalseNo
acceptaccepted file types, will not work when thumbnail-mode === true.stringNo
on-previewhook function when clicking the uploaded files.(uploadFile: UploadFile) => voidNo
on-removehook function when files are removed.(uploadFile: UploadFile, uploadFiles: UploadFiles) => voidNo
on-successhook function when uploaded successfully.(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => voidNo
on-errorhook function when some errors occurs.(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => voidNo
on-progresshook function when some progress occurs.(evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => voidNo
on-changehook function when select file or upload file success or upload file fail.(uploadFile: UploadFile, uploadFiles: UploadFiles) => voidNo
on-exceedhook function when limit is exceeded.(files: File[], uploadFiles: UploadFiles) => voidNo
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.(rawFile: UploadRawFile) => Awaitable<void | undefined | null | boolean | File | Blob>No
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.(uploadFile: UploadFile, uploadFiles: UploadFiles) => Awaitable<boolean>No
file-list / v-model:file-listdefault uploaded files.UploadUserFile[][]No
list-typetype of file list."text" | "picture" | "picture-card"'text'No
auto-uploadwhether to auto upload file.booleantrueNo
http-requestoverride default xhr behavior, allowing you to implement your own upload-file's request.(options: UploadRequestOptions) => XMLHttpRequest | Promise<unknown>No
disabledwhether to disable upload.booleanfalseNo
limitmaximum number of uploads allowed.numberNo

Slots

NameDescriptionScope
defaultcustomize default content.-
triggercontent which triggers file dialog.-
tipcontent of tips.-
filecontent of thumbnail template.{ file: UploadFile }

Exposes

NameDescriptionType
abortcancel upload request.(file: UploadFile) => void
submitupload the file list manually.() => void
clearFilesclear the file list (this method is not supported in the before-upload hook).(status?: Array<"ready" | "uploading" | "success" | "fail">) => void
handleStartselect the file manually.(rawFile: UploadRawFile) => void
handleRemoveremove the file manually. file and rawFile has been merged. rawFile will be removed in v2.2.0.(file: UploadFile | UploadRawFile, rawFile?: UploadRawFile) => void

Source

ComponentDocs

Contributors