Upload files by clicking or drag-and-drop

Click to upload files

Cover previous file

User avatar upload

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

Photo Wall

Use list-type to change the fileList style.

Custom file thumbnail

Use scoped-slot to change default thumbnail template.

FileList 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


AttributeDescriptionTypeAccepted ValuesDefault
actionrequired, request URLstring
headersrequest headersobject
methodset upload request methodstringpost/put/patchpost
multiplewhether uploading multiple files is permittedboolean
dataadditions options of requestobject
namekey name for uploaded filestringfile
with-credentialswhether cookies are sentbooleanfalse
show-file-listwhether to show the uploaded file listbooleantrue
dragwhether to activate drag and drop modebooleanfalse
acceptaccepted file types, will not work when thumbnail-mode is truestring
on-previewhook function when clicking the uploaded filesfunction(file)
on-removehook function when files are removedfunction(file, fileList)
on-successhook function when uploaded successfullyfunction(response, file, fileList)
on-errorhook function when some errors occursfunction(err, file, fileList)
on-progresshook function when some progress occursfunction(event, file, fileList)
on-changehook function when select file or upload file success or upload file failfunction(file, fileList)
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 abortedfunction(file)
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, fileList)
thumbnail-modewhether thumbnail is displayedbooleanfalse
file-listdefault uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]array[]
list-typetype of fileListstringtext/picture/picture-cardtext
auto-uploadwhether to auto upload filebooleantrue
http-requestoverride default xhr behavior, allowing you to implement your own upload-file's requestfunction
disabledwhether to disable uploadbooleanfalse
limitmaximum number of uploads allowednumber
on-exceedhook function when limit is exceededfunction(files, fileList)-


customize default content-
triggercontent which triggers file dialog-
tipcontent of tips-
filecontent of thumbnail template.file ( #file = { file } )


Methods NameDescriptionParametersDefault
clearFilesclear the file list (this method is not supported in the before-upload hook).UploadStatus[] (UploadStatus = 'ready' | 'uploading' | 'success' | 'fail')['ready', 'uploading', 'success', 'fail']
abortcancel upload request( file: fileList's item )-
submitupload the file list manually-
handleStartselect the file manually( file: files' item)-
handleRemoveremove the file manually( file: fileList's item )-