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: {
        action: "/upload.php",
        max: 2,
        onSuccess:function (res, file) {
            file.url = res.url;
        }
    },
}

Props Configuration Examples

Image Upload

const rule = {
    type: "upload",
    field: "image",
    title: "Product Image",
    value: [],
    props: {
        action: "/upload.php",
        listType: "image-card",
        accept: "image/*",
        max: 5,
        multiple: true,
        onSuccess: function (res, file) {
            file.url = res.url;
        }
    },
}

File Upload

const rule = {
    type: "upload",
    field: "file",
    title: "Attachment Upload",
    value: [],
    props: {
        action: "/upload.php",
        listType: "text",
        accept: ".pdf,.doc,.docx",
        max: 3,
        multiple: true,
        onSuccess: function (res, file) {
            file.url = res.url;
        }
    },
}

Limit File Size

const rule = {
    type: "upload",
    field: "file",
    title: "File Upload",
    value: [],
    props: {
        action: "/upload.php",
        accept: "image/*",
        onBeforeUpload: function ({ file }) {
            if (file.file.size > 2 * 1024 * 1024) {
                return false; // Limit 2MB
            }
            return true;
        },
        onSuccess: function (res, file) {
            file.url = res.url;
        }
    },
}

Custom Upload

const rule = {
    type: "upload",
    field: "file",
    title: "Custom Upload",
    value: [],
    props: {
        customRequest: function ({ file, onFinish, onError }) {
            // Custom upload logic
            const formData = new FormData();
            formData.append('file', file.file);


fetch('/upload.php', {
                method: 'POST',
                body: formData
            }).then(res => res.json()).then(data => {
                file.url = data.url;
                onFinish();
            }).catch(onError);
        },
        onSuccess: function (res, file) {
            file.url = res.url;
        }
    },
}

Events Examples

Handle Upload Status

const rule = {
    type: "upload",
    field: "file",
    title: "File Upload",
    value: [],
    props: {
        action: "/upload.php",
        onSuccess: function (res, file) {
            file.url = res.url;
        },
        onChange: function ({ file, fileList }) {
            console.log('File status changed:', file.status);
        },
        onError: function ({ file }) {
            console.log('Upload failed:', file);
        },
        onFinish: function ({ file }) {
            console.log('Upload completed:', file);
        },
    },
}

Update Other Fields After Upload

const rule = [
    {
        type: "upload",
        field: "cover",
        title: "Cover Image",
        value: [],
        props: {
            action: "/upload.php",
            listType: "image-card",
            accept: "image/*",
            max: 1,
            onSuccess: function (res, file) {
                file.url = res.url;
            },
        },
        inject: true,
        on: {
            change: ($inject, { file, fileList }) => {
                // Fill image URL after successful upload
                if (file.status === 'finished' && file.url) {
                    $inject.api.setValue('coverUrl', file.url);
                }
            },
        },
    },
    {
        type: "input",
        field: "coverUrl",
        title: "Cover URL",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: naive-ui_Upload

value :Array | String

Note

After the file is successfully uploaded, you need to assign the url from the interface response to file.url through the onSuccess callback. Otherwise, the form cannot get the component's data.

Props

Name	Type	Default Value	Description	Version
onSuccess	Function	undefined	Callback after file upload succeeds
abstract	boolean	false	Whether DOM wrapper exists, does not support image-card type Upload
accept	string	undefined	Accepted file types, refer to accept
action	string	undefined	Request submission address
create-thumbnail-url	(file: File) => Promise<string>	undefined	Custom file thumbnail
custom-request	(options: UploadCustomRequestOptions) => void	undefined	Custom upload method, type reference UploadCustomRequestOptions
data	Object | ({ file: UploadFileInfo }) => Object	undefined	Additional data needed for form submission
default-file-list	Array<UploadFileInfo>	[]	Default file list in uncontrolled state
default-upload	boolean	true	Whether to upload by default when selecting files
disabled	boolean	false	Whether disabled
file-list-style	Object	undefined	Style of file list area
file-list	Array<UploadFileInfo>	undefined	File list, if passed in, component will be in controlled state
headers	Object | ({ file: UploadFileInfo }) => Object	undefined	Additional Headers needed for HTTP request
image-group-props	ImageGroupProps	undefined	Props of preview image component in Upload, refer to ImageGroup Props	2.24.0
input-props	Object	undefined	Props of file input element	2.24.2
list-type	string	'text'	Built-in style of file list, text, image and image-card
max	number	undefined	Limit the number of uploaded files
method	string	'POST'	HTTP request method
multiple	boolean	false	Whether to support multiple files
name	string	'file'	Field name of file in form submission
show-cancel-button	boolean	true	Whether to show cancel button (displayed when pending, uploading, error), clicking cancel button will trigger on-remove callback
show-download-button	boolean	false	Whether to show download button (displayed after finished)
show-remove-button	boolean	true	Whether to show delete button (displayed after finished), clicking delete button will trigger on-remove callback
show-retry-button	boolean	true	Whether to show retry upload button (displayed when error)
show-file-list	boolean	true	Whether to show file list
show-preview-button	boolean	true	Whether to allow showing preview button (effective when list-type is image-card)
show-trigger	boolean	true	Whether to show trigger element	2.21.5
with-credentials	boolean	false	Whether to carry Cookie
on-change	(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo>, event?: Event }) => void | () => {}	Callback when component state changes, any file state change in component will trigger callback
on-error	(options: { file: UploadFileInfo, event?: ProgressEvent }) => UploadFileInfo | void | undefined	Callback when file upload fails	2.24.0
on-finish	(options: { file: UploadFileInfo, event?: ProgressEvent }) => UploadFileInfo | void | ({ file }) => file	Callback when file upload ends, can modify the passed UploadFileInfo or return a new UploadFileInfo. Note: file will be set to null in the next event loop
on-before-upload	(options: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => (Promise<boolean | void> | boolean | void)	undefined	Callback before file upload, returning false, Promise resolve false, Promise rejected will cancel this upload
on-download	(file: FileInfo) => void	undefined	Callback function when clicking file download button
on-preview	(file: FileInfo) => void	undefined	Callback function when clicking file link or preview button
on-remove	(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo> }) => Promise<boolean> | boolean | any | () => true	File delete callback, returning false, Promise resolve false, Promise rejected will cancel this deletion
on-update:file-list	(fileList: UploadFileInfo[]) => void	undefined	Callback function triggered when file-list changes