Upload 上传

accept 文件类型

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

规则

基础示例

const rule = {
    type: "upload",
    field: "pic",
    title: "轮播图",
    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 配置示例

图片上传

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

文件上传

const rule = {
    type: "upload",
    field: "file",
    title: "附件上传",
    value: [],
    props: {
        action: "/upload.php",
        listType: "text",
        accept: ".pdf,.doc,.docx",
        limit: 3,
        multiple: true,
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

限制文件大小

const rule = {
    type: "upload",
    field: "file",
    title: "文件上传",
    value: [],
    props: {
        action: "/upload.php",
        accept: "image/*",
        onBeforeUpload: function (file) {
            if (file.size > 2 * 1024 * 1024) {
                return false; // 限制2MB
            }
            return true;
        },
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

拖拽上传

const rule = {
    type: "upload",
    field: "file",
    title: "拖拽上传",
    value: [],
    props: {
        action: "/upload.php",
        draggable: true,
        onSuccess: function (file) {
            file.url = file.response.url;
        }
    },
}

Events 事件示例

监听上传状态

const rule = {
    type: "upload",
    field: "file",
    title: "文件上传",
    value: [],
    props: {
        action: "/upload.php",
        onSuccess: function (file) {
            file.url = file.response.url;
        },
    },
    on: {
        change: (fileList, fileItem) => {
            console.log('文件状态改变:', fileItem.status);
        },
        error: (fileItem) => {
            console.log('上传失败:', fileItem);
        },
        progress: (fileItem) => {
            console.log('上传进度:', fileItem.percent);
        },
    },
}

上传后更新其他字段

const rule = [
    {
        type: "upload",
        field: "cover",
        title: "封面图",
        value: [],
        props: {
            action: "/upload.php",
            listType: "picture-card",
            accept: "image/*",
            limit: 1,
            onSuccess: function (file) {
                file.url = file.response.url;
            },
        },
        inject: true,
        on: {
            change: ($inject, fileList, fileItem) => {
                // 上传成功后，自动填充图片URL字段
                if (fileItem.status === 'done' && fileItem.url) {
                    $inject.api.setValue('coverUrl', fileItem.url);
                }
            },
        },
    },
    {
        type: "input",
        field: "coverUrl",
        title: "封面URL",
        props: {
            disabled: true,
        },
    },
]

完整配置项:arco-design_Upload

value :Array | String

注意

文件上传成功后需要通过 onSuccess 回调, 将接口返回内容中的 url 赋值给 file.url.否则表单获取不到组件的数据

Props

参数名	描述	类型	默认值	版本
onSuccess	上传成功时触发	string	-
accept	接收的上传文件类型，具体参考 HTML标准	string	-
action	上传的URL	string	-
disabled	是否禁用	boolean	false
multiple	是否支持多文件上传	boolean	false
directory	是否支持文件夹上传（需要浏览器支持）	boolean	false
draggable	是否支持拖拽上传	boolean	false
tip	提示文字	string	-
headers	上传请求附加的头信息	object	-
data	上传请求附加的数据	Record<string, unknown>| ((fileItem: FileItem) => Record<string, unknown>)	-
name	上传的文件名	string | ((fileItem: FileItem) => string)	-
with-credentials	上传请求是否携带 cookie	boolean	false
custom-request	自定义上传行为	(option: RequestOption) => UploadRequest	-
limit	限制上传文件的数量。0表示不限制	number	0
auto-upload	是否自动上传文件	boolean	true
show-file-list	是否显示文件列表	boolean	true
show-remove-button	是否显示删除按钮	boolean	true	2.11.0
show-retry-button	是否显示重试按钮	boolean	true	2.11.0
show-cancel-button	是否显示取消按钮	boolean	true	2.11.0
show-upload-button	是否显示上传按钮。2.14.0 版本新增 showOnExceedLimit 支持	boolean | { showOnExceedLimit: boolean }	true	2.11.0
download	是否在 <a> 链接上添加 download 属性	boolean	false	2.11.0
show-link	在列表模式下，如果上传的文件存在 URL 则展示链接。如果关闭仅展示文字并且点击可以触发 preview 事件。 | boolean	true	2.13.0
image-loading	<img> 的原生 HTML 属性，需要浏览器支持	'eager' | 'lazy'	-	2.11.0
list-type	图片列表类型	'text' | 'picture' | 'picture-card'	'text'
response-url-key	Response中获取图片URL的key，开启后会用上传的图片替换预加载的图片	string | ((fileItem: FileItem) => string)	-
custom-icon	自定义图标	CustomIcon	-
image-preview	是否使用 ImagePreview 组件进行预览	boolean	false	2.14.0
on-before-upload	上传图片前触发	(file: File) => Promise<boolean>	-
on-before-remove	移除图片前触发	(fileItem: FileItem) => Promise<boolean>	-
on-button-click	点击上传按钮触发（如果返回 Promise 则会关闭默认 input 上传）	(event: Event) => Promise<FileList> | void	-

Events

事件名	描述	参数
exceed-limit	上传的图片超出限制后触发	fileList: FileItem[] files: File[]
change	上传的图片状态发生改变时触发	fileList: FileItem[] fileItem: fileItem
progress	上传中的图片进度改变时触发	fileItem: fileItem event: ProgressEvent
preview	点击图片预览时的触发	fileItem: FileItem
error	上传失败时触发	fileItem: FileItem