FormCreate

# Uploader 上传

uploader

accept 文件类型

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept (opens new window)

# 规则

{
    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;
        }
    }
},

参考:Vant_Uploader (opens new window)

value :Array | String

注意

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

# Props

参数 说明 类型 默认值
accept 允许上传的文件类型，详细说明 (opens new window) string image/*
name 标识符，通常为一个唯一的字符串或数字，可以在回调函数的第二项参数中获取 number | string -
preview-size 预览图和上传区域的尺寸，默认单位为 px number | string | Array 80px
preview-image 是否在上传完成后展示预览图 boolean true
preview-full-image 是否在点击预览图后展示全屏图片预览 boolean true
preview-options 全屏图片预览的配置项，可选值见 ImagePreview (opens new window) object -
multiple 是否开启图片多选，部分安卓机型不支持 boolean false
disabled 是否禁用文件上传 boolean false
readonly 是否将上传区域设置为只读状态 boolean false
deletable 是否展示删除按钮 boolean true
reupload 是否开启覆盖上传，开启后会关闭图片预览 boolean false
show-upload 是否展示上传区域 boolean true
lazy-load 是否开启图片懒加载，须配合 Lazyload (opens new window) 组件使用 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 (opens new window) 组件 string cover
upload-icon 上传区域图标名称或图片链接，等同于 Icon 组件的 name 属性 (opens new window) string photograph

# Events

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

← Rate 评分 →