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: {
        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 配置示例

单图片上传

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

多图片上传

const rule = {
    type: "upload",
    field: "gallery",
    title: "商品图片",
    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;
        }
    },
}

文件上传

const rule = {
    type: "upload",
    field: "document",
    title: "文档上传",
    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;
        }
    },
}

拖拽上传

const rule = {
    type: "upload",
    field: "images",
    title: "拖拽上传",
    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;
        }
    },
}

上传前验证

const rule = {
    type: "upload",
    field: "avatar",
    title: "头像",
    value: [],
    props: {
        type: "select",
        uploadType: "image",
        action: "/upload.php",
        name: "file",
        accept: "image/*",
        limit: 1,
        beforeUpload: function (file) {
            // 验证文件大小（2MB）
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                alert('图片大小不能超过 2MB!');
                return false;
            }
            return true;
        },
        onSuccess: function (res, file) {
            file.url = res.data.filePath;
        }
    },
}

自定义上传请求

const rule = {
    type: "upload",
    field: "file",
    title: "文件上传",
    value: [],
    props: {
        type: "select",
        uploadType: "file",
        action: "#",
        name: "file",
        httpRequest: function (options) {
            // 自定义上传逻辑
            const formData = new FormData();
            formData.append('file', options.file);


// 使用 fetch 或其他方式上传
            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 事件示例

监听上传事件

const rule = {
    type: "upload",
    field: "pic",
    title: "图片上传",
    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('上传失败:', err);
        },
        onProgress: function (event, file) {
            console.log('上传进度:', event.percent + '%');
        },
        onChange: function (file, fileList) {
            console.log('文件状态改变:', file, fileList);
        },
        onExceed: function (files, fileList) {
            console.log('超出限制:', files, fileList);
            alert('超出文件上传数量限制！');
        },
        onRemove: function (file, fileList) {
            console.log('移除文件:', file, fileList);
        },
    },
}

完整配置项:Element_Upload

value :Array | String

注意

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

Props

名称	描述	类型	默认值
action required	请求 URL	string	#
uploadType	上传文件类型	String	image（图片上传），file（文件上传）
headers	设置上传的请求头部	object	—
method	设置上传请求方法	string	post
multiple	是否支持多选文件	boolean	false
data	上传时附带的额外参数 从 v2.3.13 支持 Awaitable 数据，和 Function	object / Function	{}
name	上传的文件字段名	string	file
withCredentials	支持发送 cookie 凭证信息	boolean	false
showFileList	是否显示已上传文件列表	boolean	true
drag	是否启用拖拽上传	boolean	false
accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效）	string	''
crossorigin	原生属性 crossorigin	enum	—
onPreview	点击文件列表中已上传的文件时的钩子	Function	—
onRemove	文件列表移除文件时的钩子	Function	—
onSuccess	文件上传成功时的钩子 function (res, file) {file.url = res.data.filePath;} 通过给回调中的 file.url 赋值回显	function(response, file, fileList)	—
onError	文件上传失败时的钩子	Function	—
onProgress	文件上传时的钩子	Function	—
onChange	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	Function	—
onExceed	当超出限制时，执行的钩子函数	Function	—
beforeUpload	上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。	Function	—
beforeRemove	删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除。	Function	—
listType	文件列表的类型	enum	text
autoUpload	是否自动上传文件	boolean	true
httpRequest	覆盖默认的 Xhr 行为，允许自行实现上传文件的请求	Function	请参考ajaxUpload
disabled	是否禁用上传	boolean	false
limit	允许上传文件的最大数量	number	—
modalTitle	图片预览弹出框标题文字	String	预览

Slots

名称	描述	类型
default	自定义默认内容	-
trigger	触发文件选择框的内容	-
tip	提示说明文字	-
file	缩略图模板的内容	object