Upload Upload

File Types for accept

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept

Rules

Basic Example

const rule = {
    type: "upload",
    field: "pic",
    title: "Carousel Images",
    value: [
        'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg',
        'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'
        ],
    props: {
        type:"select",
        uploadType:"image",
        action: "/upload.php",
        name:"pic",
        multiple: true,
        accept:"image/*",
        limit: 2,
        onSuccess:function (res, file) {
            file.url = res.data.filePath;
        }
    },
}

Props Configuration Examples

Single Image Upload

const rule = {
    type: "upload",
    field: "avatar",
    title: "Avatar",
    value: [],
    props: {
        type: "select",
        uploadType: "image",
        action: "/upload.php",
        name: "file",
        accept: "image/*",
        limit: 1,
        onSuccess: function (res, file) {
            file.url = res.data.filePath;
        }
    },
}

Multiple Image Upload

const rule = {
    type: "upload",
    field: "gallery",
    title: "Product Images",
    value: [],
    props: {
        type: "select",
        uploadType: "image",
        action: "/upload.php",
        name: "file",
        multiple: true,
        accept: "image/*",
        limit: 9,
        listType: "picture-card",
        onSuccess: function (res, file) {
            file.url = res.data.filePath;
        }
    },
}

File Upload

const rule = {
    type: "upload",
    field: "document",
    title: "Document Upload",
    value: [],
    props: {
        type: "select",
        uploadType: "file",
        action: "/upload.php",
        name: "file",
        accept: ".pdf,.doc,.docx",
        limit: 5,
        onSuccess: function (res, file) {
            file.url = res.data.filePath;
        }
    },
}

Drag and Drop Upload

const rule = {
    type: "upload",
    field: "images",
    title: "Drag and Drop Upload",
    value: [],
    props: {
        type: "select",
        uploadType: "image",
        action: "/upload.php",
        name: "file",
        drag: true,
        multiple: true,
        accept: "image/*",
        onSuccess: function (res, file) {
            file.url = res.data.filePath;
        }
    },
}

Validation Before Upload

const rule = {
    type: "upload",
    field: "avatar",
    title: "Avatar",
    value: [],
    props: {
        type: "select",
        uploadType: "image",
        action: "/upload.php",
        name: "file",
        accept: "image/*",
        limit: 1,
        beforeUpload: function (file) {
            // Validate file size (2MB)
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                alert('Image size cannot exceed 2MB!');
                return false;
            }
            return true;
        },
        onSuccess: function (res, file) {
            file.url = res.data.filePath;
        }
    },
}

Custom Upload Request

const rule = {
    type: "upload",
    field: "file",
    title: "File Upload",
    value: [],
    props: {
        type: "select",
        uploadType: "file",
        action: "#",
        name: "file",
        httpRequest: function (options) {
            // Custom upload logic
            const formData = new FormData();
            formData.append('file', options.file);


// Upload using fetch or other methods
            fetch('/custom-upload', {
                method: 'POST',
                body: formData
            }).then(res => res.json())
            .then(data => {
                options.onSuccess(data);
            })
            .catch(err => {
                options.onError(err);
            });
        },
        onSuccess: function (res, file) {
            file.url = res.data.filePath;
        }
    },
}

Events Examples

Listen to Upload Events

const rule = {
    type: "upload",
    field: "pic",
    title: "Image Upload",
    value: [],
    props: {
        type: "select",
        uploadType: "image",
        action: "/upload.php",
        name: "file",
        accept: "image/*",
        onSuccess: function (res, file) {
            file.url = res.data.filePath;
        },
        onError: function (err, file) {
            console.log('Upload failed:', err);
        },
        onProgress: function (event, file) {
            console.log('Upload progress:', event.percent + '%');
        },
        onChange: function (file, fileList) {
            console.log('File state changed:', file, fileList);
        },
        onExceed: function (files, fileList) {
            console.log('Exceeded limit:', files, fileList);
            alert('File upload limit exceeded!');
        },
        onRemove: function (file, fileList) {
            console.log('File removed:', file, fileList);
        },
    },
}

Full configuration: Element_Upload

value :Array | String

Note

After file upload is successful, you need to assign the url from the interface response to file.url through the onSuccess callback. Otherwise, the form will not be able to obtain the component's data.

Props

Name	Description	Type	Default Value
action required	Request URL	string	#
uploadType	Upload file type	String	image (image upload), file (file upload)
headers	Set upload request headers	object	—
method	Set upload request method	string	post
multiple	Whether to support multiple file selection	boolean	false
data	Additional parameters attached during upload. From v2.3.13, supports Awaitable data and Function	object / Function	{}
name	Field name of uploaded file	string	file
withCredentials	Support sending cookie credential information	boolean	false
showFileList	Whether to display uploaded file list	boolean	true
drag	Whether to enable drag and drop upload	boolean	false
accept	Accepted upload file types (this parameter is invalid in thumbnail-mode)	string	''
crossorigin	Native attribute crossorigin	enum	—
onPreview	Hook when clicking uploaded file in file list	Function	—
onRemove	Hook when removing file from file list	Function	—
onSuccess	Hook when file upload is successful function (res, file) {file.url = res.data.filePath;} Echo by assigning value to file.url in the callback	function(response, file, fileList)	—
onError	Hook when file upload fails	Function	—
onProgress	Hook during file upload	Function	—
onChange	Hook when file state changes. Called when adding file, upload success and upload failure	Function	—
onExceed	Hook function executed when limit is exceeded	Function	—
beforeUpload	Hook before uploading file. Parameter is the file to be uploaded. If it returns false or returns Promise and is rejected, upload stops.	Function	—
beforeRemove	Hook before deleting file. Parameters are the uploaded file and file list. If it returns false or returns Promise and is rejected, deletion stops.	Function	—
listType	Type of file list	enum	text
autoUpload	Whether to automatically upload files	boolean	true
httpRequest	Override default Xhr behavior, allow custom implementation of file upload request	Function	Please refer to ajaxUpload
disabled	Whether to disable upload	boolean	false
limit	Maximum number of files allowed to upload	number	—
modalTitle	Title text for image preview popup	String	Preview
helper	Enable helper methods in frame page	Boolean	false

Slots

Name	Description	Type
default	Custom default content	-
trigger	Content that triggers file selection box	-
tip	Hint description text	-
file	Content of thumbnail template	object