Uploader

Accept File Types

For valid file type values, see MDN documentation on accept attribute

Rule

Basic Example

const rule = {
    type: 'uploader',
    title: 'Upload',
    field: 'uploader',
    value: [],
    props: {
        action: 'https://run.mocky.io/v3/88bff269-1d6d-4799-8b3b-5736402b3d4a',
        onSuccess(res, file) {
            file.url = res.url;
        }
    }
}

Props Configuration Examples

Single Image Upload

const rule = {
    type: 'uploader',
    title: 'Avatar',
    field: 'avatar',
    value: [],
    props: {
        action: '/upload.php',
        maxCount: 1,
        accept: 'image/*',
        onSuccess(res, file) {
            file.url = res.url;
        }
    }
}

Multiple Image Upload

const rule = {
    type: 'uploader',
    title: 'Product Images',
    field: 'gallery',
    value: [],
    props: {
        action: '/upload.php',
        multiple: true,
        accept: 'image/*',
        maxCount: 9,
        onSuccess(res, file) {
            file.url = res.url;
        }
    }
}

File Upload

const rule = {
    type: 'uploader',
    title: 'Document Upload',
    field: 'document',
    value: [],
    props: {
        action: '/upload.php',
        accept: '.pdf,.doc,.docx',
        maxCount: 5,
        onSuccess(res, file) {
            file.url = res.url;
        }
    }
}

Validation Before Upload

const rule = {
    type: 'uploader',
    title: 'Avatar',
    field: 'avatar',
    value: [],
    props: {
        action: '/upload.php',
        maxCount: 1,
        accept: 'image/*',
        maxSize: 2 * 1024 * 1024, // 2MB
        beforeRead: (file) => {
            // Validate file size before upload
            if (file.size > 2 * 1024 * 1024) {
                alert('Image size cannot exceed 2MB');
                return false;
            }
            return true;
        },
        onSuccess(res, file) {
            file.url = res.url;
        }
    }
}

Events Examples

Listen to Upload Events

const rule = {
    type: 'uploader',
    title: 'Image Upload',
    field: 'pic',
    value: [],
    props: {
        action: '/upload.php',
        accept: 'image/*',
        onSuccess(res, file) {
            file.url = res.url;
        },
        afterRead: (file) => {
            console.log('File read completed:', file);
        },
        beforeRead: (file) => {
            console.log('Before file read:', file);
            return true;
        },
        beforeDelete: (file) => {
            console.log('Before delete:', file);
            return true;
        },
    },
    on: {
        oversize: (file) => {
            console.log('File size exceeds limit:', file);
        },
        'click-upload': (event) => {
            console.log('Upload area clicked:', event);
        },
        delete: (file) => {
            console.log('File deleted:', file);
        },
    },
}

Complete configuration items:Vant_Uploader

value :Array | String

Note

After a successful upload, assign the URL from the API response to file.url in the onSuccess callback. Otherwise, the form cannot access the component data.

Props

Parameter	Description	Type	Default Value
accept	Allowed file types for upload, Detailed description	string	image/*
name	Identifier, usually a unique string or number, can be obtained in the second parameter of the callback function	number | string	-
preview-size	Size of preview image and upload area, default unit is px	number | string | Array	80px
preview-image	Whether to show preview image after upload completes	boolean	true
preview-full-image	Whether to show full-screen image preview after clicking preview image	boolean	true
preview-options	Configuration items for full-screen image preview, see ImagePreview for optional values	object	-
multiple	Whether to enable multiple image selection, some Android devices do not support	boolean	false
disabled	Whether to disable file upload	boolean	false
readonly	Whether to set upload area to readonly state	boolean	false
deletable	Whether to show delete button	boolean	true
reupload	Whether to enable overwrite upload, will close image preview when enabled	boolean	false
show-upload	Whether to show upload area	boolean	true
lazy-load	Whether to enable image lazy loading, must be used with Lazyload component	boolean	false
capture	Image selection mode, optional value is camera (directly open camera)	string	-
after-read	Callback function after file read completes	Function	-
before-read	Callback function before file read, return false to terminate file read, supports returning Promise	Function	-
before-delete	Callback function before file delete, return false to terminate file read, supports returning Promise	Function	-
max-size	File size limit, unit is byte	number | string | (file: File) => boolean	Infinity
max-count	File upload count limit	number | string	Infinity
result-type	File read result type, optional values are file text	string	dataUrl
upload-text	Upload area text hint	string	-
image-fit	Preview image crop mode, see Image component for optional values	string	cover
upload-icon	Upload area icon name or image link, same as Icon component's name attribute	string	photograph

Events

Event Name	Description	Callback Parameters
oversize	Triggered when file size exceeds limit	Same as after-read
click-upload	Triggered when upload area is clicked	event: MouseEvent
click-preview	Triggered when preview image is clicked	Same as after-read
click-reupload	Triggered when overwrite upload is clicked	Same as after-read
close-preview	Triggered when full-screen image preview is closed	-
delete	Triggered when file preview is deleted	Same as after-read