Upload Component

Upload component allows users to upload files by clicking or dragging. It supports multiple display modes, automatic/manual upload, and rich customization features.

Basic Usage

Upload files by clicking the upload button, use the action attribute to set the upload address.

Show Code

List Type

Upload component supports two file list display modes: text list and picture list. Use the list-type attribute to configure.

Text List (list-type="text")

Picture List (list-type="picture")

Show Code

Drag Upload

Setting the drag attribute enables drag upload mode, allowing users to drag files to a specific area for upload.

Show Code

Manual Upload

Setting auto-upload to false disables automatic upload, requiring the submit method to be called to manually start upload.

Show Code

Upload Restrictions

You can use accept, max-size, and limit attributes to restrict file type, size, and quantity respectively.

File Type Restriction (accept)

File Size Restriction (max-size)

Quantity Restriction (limit)

Show Code

Custom Upload

Through the http-request attribute, you can customize upload behavior for more flexible upload implementation.

Custom Upload Implementation (http-request)

Custom Additional Data (data)

Show Code

Event Handling

Upload component provides rich events for handling various state changes during the upload process.

Event Log

No log records

Show Code

Slot Usage

Through multiple slots, you can customize different parts of the upload component, including trigger buttons, file lists, etc.

Default Slot (Trigger Button)

Drag Area Slot (drag)

File List Item Slot (file-item)

Show Code

Upload Component API

Attributes

Attribute	Description	Type	Accepted Values	Default
action	Upload URL	string	—	—
headers	Set upload request headers	object	—	—
multiple	Whether to support multiple file selection	boolean	—	false
data	Additional parameters for upload	object	—	—
name	Upload file field name	string	—	file
with-credentials	Support sending cookie credentials	boolean	—	false
accept	Accepted upload file types	string	—	—
max-size	File size limit in MB	number	—	—
file-list	Uploaded file list	UploadFile[]	—	[]
auto-upload	Whether to upload immediately after file selection	boolean	—	true
list-type	File list type	string	text / picture	text
drag	Whether to enable drag upload	boolean	—	false
disabled	Whether disabled	boolean	—	false
show-file-list	Whether to show uploaded file list	boolean	—	true
limit	Maximum number of uploads allowed	number	—	—
before-upload	Hook before uploading file	(file: File) => boolean | Promise<any>	—	—
before-remove	Hook before removing file	(file: UploadFile, fileList: UploadFile[]) => boolean	—	—
http-request	Override default upload behavior	(options: UploadRequestOptions) => Promise<any>	—	—

UploadFile Type

Attribute	Description	Type	Accepted Values
uid	File unique identifier	number | string	—
name	File name	string	—
size	File size	number	—
type	File type	string	—
status	File status	string	ready / uploading / success / fail
percentage	Upload progress	number	0-100
url	File URL address	string	—
response	Upload response data	any	—
error	Upload error info	Error	—
raw	Raw file object	File	—

Events

Event Name	Description	Parameters
success	Triggered when file upload succeeds	(file: UploadFile, response: any)
error	Triggered when file upload fails	(file: UploadFile, error: Error)
progress	Triggered when file upload progress changes	(file: UploadFile, percent: number)
change	Triggered when file status changes	(file: UploadFile | null, fileList: UploadFile[])
exceed	Triggered when file count exceeds limit	(files: File[], fileList: UploadFile[])
remove	Triggered when file is removed	(file: UploadFile, fileList: UploadFile[])
preview	Triggered when clicking uploaded file link	(file: UploadFile)

Methods

Method Name	Description	Parameters
clearFiles	Clear file list	—
abort	Cancel upload	(file?: UploadFile) Optional, specify file. Cancels all uploads if not provided
submit	Manually upload file	—

Slots

Slot Name	Description	Scope Parameters
default	Upload trigger area	—
tip	Tip description text	—
file	File list item	{ file: UploadFile }

Style Variables

Upload component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$theme-color-primary	Theme color
$text-color-default	Text color
$border-color-default	Border color
$bg-color-default	Background color
$font-size-default	Default font size