Upload

Upload files by clicking or drag-and-drop

Click to upload files

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

Attributes

AttributeDescriptionTypeAccepted ValuesDefault
actionrequired, request URLstring
headersrequest headersobject
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)-

Slots

NameDescription
customize default content
triggercontent which triggers file dialog
tipcontent of tips

Methods

Methods NameDescriptionParameters
clearFilesclear the uploaded file list (this method is not supported in the before-upload hook)
abortcancel upload request( file: fileList's item )
submitupload the file list manually