Uploader 上传

accept 文件类型

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

规则

基础示例

const rule = {
    type: 'uploader',
    title: '上传',
    field: 'uploader',
    value: [],
    props: {
        action: 'https://run.mocky.io/v3/88bff269-1d6d-4799-8b3b-5736402b3d4a',
        onSuccess(res, file) {
            file.url = res.url;
        }
    }
}

Props 配置示例

单图片上传

const rule = {
    type: 'uploader',
    title: '头像',
    field: 'avatar',
    value: [],
    props: {
        action: '/upload.php',
        maxCount: 1,
        accept: 'image/*',
        onSuccess(res, file) {
            file.url = res.url;
        }
    }
}

多图片上传

const rule = {
    type: 'uploader',
    title: '商品图片',
    field: 'gallery',
    value: [],
    props: {
        action: '/upload.php',
        multiple: true,
        accept: 'image/*',
        maxCount: 9,
        onSuccess(res, file) {
            file.url = res.url;
        }
    }
}

文件上传

const rule = {
    type: 'uploader',
    title: '文档上传',
    field: 'document',
    value: [],
    props: {
        action: '/upload.php',
        accept: '.pdf,.doc,.docx',
        maxCount: 5,
        onSuccess(res, file) {
            file.url = res.url;
        }
    }
}

上传前验证

const rule = {
    type: 'uploader',
    title: '头像',
    field: 'avatar',
    value: [],
    props: {
        action: '/upload.php',
        maxCount: 1,
        accept: 'image/*',
        maxSize: 2 * 1024 * 1024, // 2MB
        beforeRead: (file) => {
            // 验证文件大小
            if (file.size > 2 * 1024 * 1024) {
                alert('图片大小不能超过 2MB!');
                return false;
            }
            return true;
        },
        onSuccess(res, file) {
            file.url = res.url;
        }
    }
}

Events 事件示例

监听上传事件

const rule = {
    type: 'uploader',
    title: '图片上传',
    field: 'pic',
    value: [],
    props: {
        action: '/upload.php',
        accept: 'image/*',
        onSuccess(res, file) {
            file.url = res.url;
        },
        afterRead: (file) => {
            console.log('文件读取完成:', file);
        },
        beforeRead: (file) => {
            console.log('文件读取前:', file);
            return true;
        },
        beforeDelete: (file) => {
            console.log('删除前:', file);
            return true;
        },
    },
    on: {
        oversize: (file) => {
            console.log('文件大小超过限制:', file);
        },
        'click-upload': (event) => {
            console.log('点击上传区域:', event);
        },
        delete: (file) => {
            console.log('删除文件:', file);
        },
    },
}

完整配置项:Vant_Uploader

value :Array | String

注意

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

Props

参数	说明	类型	默认值
accept	允许上传的文件类型，详细说明	string	image/*
name	标识符，通常为一个唯一的字符串或数字，可以在回调函数的第二项参数中获取	number | string	-
preview-size	预览图和上传区域的尺寸，默认单位为 px	number | string | Array	80px
preview-image	是否在上传完成后展示预览图	boolean	true
preview-full-image	是否在点击预览图后展示全屏图片预览	boolean	true
preview-options	全屏图片预览的配置项，可选值见 ImagePreview	object	-
multiple	是否开启图片多选，部分安卓机型不支持	boolean	false
disabled	是否禁用文件上传	boolean	false
readonly	是否将上传区域设置为只读状态	boolean	false
deletable	是否展示删除按钮	boolean	true
reupload	是否开启覆盖上传，开启后会关闭图片预览	boolean	false
show-upload	是否展示上传区域	boolean	true
lazy-load	是否开启图片懒加载，须配合 Lazyload 组件使用	boolean	false
capture	图片选取模式，可选值为 camera (直接调起摄像头)	string	-
after-read	文件读取完成后的回调函数	Function	-
before-read	文件读取前的回调函数，返回 false 可终止文件读取， 支持返回 Promise	Function	-
before-delete	文件删除前的回调函数，返回 false 可终止文件读取， 支持返回 Promise	Function	-
max-size	文件大小限制，单位为 byte	number | string | (file: File) => boolean	Infinity
max-count	文件上传数量限制	number | string	Infinity
result-type	文件读取结果类型，可选值为 file text	string	dataUrl
upload-text	上传区域文字提示	string	-
image-fit	预览图裁剪模式，可选值见 Image 组件	string	cover
upload-icon	上传区域图标名称或图片链接，等同于 Icon 组件的 name 属性	string	photograph

Events

事件名	说明	回调参数
oversize	文件大小超过限制时触发	同 after-read
click-upload	点击上传区域时触发	event: MouseEvent
click-preview	点击预览图时触发	同 after-read
click-reupload	点击覆盖上传时触发	同 after-read
close-preview	关闭全屏图片预览时触发	-
delete	删除文件预览时触发	同 after-read