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",
    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",
        limit: 2,
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

Props Configuration Examples

Single Image Upload

const rule = {
    type: "upload",
    field: "avatar",
    title: "Avatar",
    value: [],
    props: {
        action: "/upload.php",
        listType: "picture-card",
        limit: 1,
        accept: "image/*",
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

Multiple Image Upload

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

File Upload

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

Drag Upload

const rule = {
    type: "upload",
    field: "images",
    title: "Drag Upload",
    value: [],
    props: {
        action: "/upload.php",
        listType: "picture-card",
        drag: true,
        multiple: true,
        accept: "image/*",
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

Validation Before Upload

const rule = {
    type: "upload",
    field: "avatar",
    title: "Avatar",
    value: [],
    props: {
        action: "/upload.php",
        listType: "picture-card",
        limit: 1,
        accept: "image/*",
        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 (file) {
            file.url = file.response.url;
        }
    },
}

Events Examples

Listen to Upload Events

const rule = {
    type: "upload",
    field: "pic",
    title: "Image Upload",
    value: [],
    props: {
        action: "/upload.php",
        listType: "picture-card",
        accept: "image/*",
        onSuccess: function (file) {
            file.url = file.response.url;
        },
        onError: function (err, file) {
            console.log('Upload failed:', err, file);
        },
        onProgress: function (event, file) {
            console.log('Upload progress:', event.percent + '%');
        },
        onChange: function (info) {
            console.log('File state changed:', info);
        },
        onRemove: function (file) {
            console.log('Remove file:', file);
        },
    },
}

Complete configuration items: Ant-design-vue_Upload

value :Array | String

Note

After a file upload succeeds, you need to assign the URL from the interface response to file.url through the onSuccess callback. Otherwise, the form cannot get the component data.

Props

Parameter	Description	Type	Default
onSuccess	Used to get file link file.url = file.response.url	Function(file,fileList)	None
accept	Accept uploaded file types, see input accept Attribute	string	-
action	Upload address	string|(file) => Promise	-
beforeUpload	Hook before uploading file, parameter is uploaded file, if returns false then stop upload. Supports returning a Promise object, when Promise object rejects then stop upload, when resolves then start upload (if resolve passes File or Blob object then upload resolve passed object).	(file, fileList) => boolean | Promise
customRequest	By overriding default upload behavior, can customize own upload implementation	function	-
data	Parameters required for upload or method to return upload parameters	object|(file) => object	-
directory	Support uploading folders (caniuse)	boolean	false
disabled	Whether disabled	boolean	-
downloadIcon	Custom download icon	v-slot:iconRender="{file: UploadFile}"	-
fileList	List of already uploaded files (controlled)	object[]	-
headers	Set upload request headers, effective in IE10+	object	-
iconRender	Custom display icon	v-slot:iconRender="{file: UploadFile, listType?: UploadListType}"	-
isImageUrl	Custom whether thumbnail uses tag for display	(file: UploadFile) => boolean	-
itemRender	Custom upload list item	v-slot:itemRender="{originNode: VNode, file: UploadFile, fileList: object[], actions: { download: function, preview: function, remove: function }"	-
listType	Built-in styles of upload list, supports three basic styles text, picture and picture-card	string	text
maxCount	Limit upload count. When 1, always replace current file with latest uploaded file	number	-
method	http method of upload request	string	post
multiple	Whether to support multiple file selection, ie10+ supports. After enabling, hold ctrl to select multiple files.	boolean	false
name	File parameter name sent to backend	string	file
openFileDialogOnClick	Click to open file dialog	boolean	true
previewFile	Custom file preview logic	(file: File | Blob) => Promise<dataURL: string>	-
previewIcon	Custom preview icon	v-slot:iconRender="{file: UploadFile}"	-
progress	Custom progress bar style	ProgressProps (only supports type="line")	{ strokeWidth: 2, showInfo: false }
removeIcon	Custom delete icon	v-slot:iconRender="{file: UploadFile}"	-
showUploadList	Whether to display uploadList, can be set to an object, used to separately set showPreviewIcon, showRemoveIcon and showDownloadIcon	boolean | { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean }	true
supportServerRender	Need to enable this for server-side rendering	boolean	false
withCredentials	Whether to carry cookie in upload request	boolean	false

Events

Event Name	Description	Callback Parameters
change	State when uploaded file changes, see change	function
download	Callback when clicking download file, if not specified, default jumps to file url corresponding tab.	function(file): void
drop	Callback function executed when file is dragged into upload area	(event: DragEvent) => void
preview	Callback when clicking file link or preview icon	function(file)
reject	Callback when dragged file does not match accept type	function(fileList)
remove	Callback when clicking remove file, return false to not remove. Supports returning a Promise object, when Promise object resolve(false) or reject then not remove	function(file): boolean | Promise

UploadFile

Inherits from File, with additional properties for rendering.

Parameter	Description	Type	Default
crossOrigin	CORS property setting	'anonymous' | 'use-credentials' | ''	-
name	File name	string	-
percent	Upload progress	number	-
status	Upload status, different statuses display different colors	error | success | done | uploading | removed	-
thumbUrl	Thumbnail address	string	-
uid	Unique identifier, automatically generated if not set	string	-
url	Download address	string	-

change

This function will be called during uploading, completion, and failure.

Callback when file status changes, returns:

{
  file: { /* ... */ },
  fileList: [ /* ... */ ],
  event: { /* ... */ },
}

1. file Current file object being operated.

   {
      uid: 'uid',      // File unique identifier, recommended to set as negative number to prevent conflict with internally generated id
      name: 'xx.png',   // File name
      status: 'done', // Statuses: uploading done error removed
      response: '{"status": "success"}', // Server response content
      linkProps: '{"download": "image"}', // Additional HTML attributes for download link
      xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header
   }

2. fileList Current file list.

3. event Server response content during upload, contains upload progress and other information, supported by advanced browsers.