ImageUpload

A secondary encapsulation of the element-plus upload component. It simplifies basic image operations.

Basic Usage

INFO

Use the api for asynchronous logic to customize the upload process, then construct the image URL parameter url.

Multiple Image Control

Properties

Property Name	Description	Type	Extended	Default Value
v-model	Image URL	string	Yes	-
api	Asynchronous upload method (required; the built-in fallback returns an empty url and always fails)	Function (file: File) => Promise<{ url: string }>	Yes	() => Promise.resolve({ url: '' })
image-types	Image format restrictions (MIME array)	Array 'image/webp','image/png','image/jpg','image/gif','image/bmp','image/jpeg'	Yes	['image/webp','image/png','image/jpg','image/gif','image/bmp','image/jpeg']
limit-size	Image size limit in MB	number	Yes	10
style	Custom style	Record	Yes	{ width: '100px', height: '100px' }
fit	Image fill mode	enum fillcontaincovernonescale-down	Yes	contain
multiple	Enable multiple image mode	boolean	Yes	false
limit	Maximum number of images in multiple mode	number	Yes	9
disabled	Disable the upload	boolean	Yes	false
on-progress	Hook triggered during file upload	Function (event: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void	No	-
on-change	Hook triggered when file status changes	Function (uploadFile: UploadFile, uploadFiles: UploadFiles) => void	No	-

Events

Event Name	Description	Type	Extended
update:model-value	Triggered when the bound value changes	Function (value) => void	Yes
success	Triggered on successful upload	Function (file: File, url: string) => void	Yes
error	Triggered on upload failure; also triggered in multiple mode when the url returned by api is outside the protocol whitelist (http(s)😕/, data:, blob:)	Function (file: File, error: Error) => void	Yes
delete	Triggered when an image is deleted	Function (url: string) => void	Yes

Methods

Method Name	Description	Parameters	Return Value
clearFiles	Clear all images	-	void
submit	Manually trigger upload	-	void
getUploadRef	Get el-upload instance	-	ElUpload instance
getUrlList	Get parsed image URL list	-	string[]