Upload
File field with a button trigger and a text list. Picture cards and a drag zone are opt-in. Progress uses brand gold. Success and failure use an icon plus text.
The built-in transport simulates progress so a demo can finish without an endpoint. Pass customRequest for a real upload. Cropping and a preview lightbox are follow-ups.
Demos
List
Default
list-type is list. Default dragger is false. Sizes are 28 / 34 / 40. Drag zone
Picture card
Sizes, max, disabled
Inside a form item
API
Properties
| Name | Type | Default | Notes |
|---|---|---|---|
value / file-list | UploadFile[] | [] | { id, name, size?, status, percent?, url?, thumbnailUrl?, file? } |
accept | string | '' | Forwarded to the hidden file input |
multiple | boolean | false | When false, a new pick replaces the list |
max | number | — | Disables the trigger and shows「已達上限」 |
size | sm | md | lg | md | Button height 28 / 34 / 40. Cards are 96 / 104 / 112 |
list-type | list | picture-card | list | |
show-file-list | boolean | true | |
show-remove-button / show-retry-button | boolean | true | |
dragger | boolean | false | Dashed drop zone instead of the button |
directory | boolean | false | Sets webkitdirectory |
name | string | 'file' | FormData field name |
default-upload | boolean | true | false leaves files pending until upload() |
customRequest | function | — | { file, fileItem, onProgress, onSuccess, onError } |
beforeUpload | function | — | Return false or throw to cancel. before-upload is also cancelable |
status is pending | uploading | success | error.
Events
| Name | Detail |
|---|---|
change, update:file-list, update:value | { fileList, value } |
before-upload | { file } — preventDefault() cancels |
progress | { file, percent } |
success | { file, response? } |
error | { file, error? } |
remove | { file } |
retry | { file } |
preview | { file } — picture-card only. No lightbox in v1 |
Parts
root, trigger, input, dragger, list, item, thumbnail, name, size, progress, status-icon, remove, retry, add.
Slots
trigger replaces the button or drag zone. file replaces the list. empty is an optional hint when the list is empty.
Set show-file-list="false", default-upload="false", or show-search style flags with the string false. A bare attribute means true.