默认主题
上传

示例

只能上传JPG/PNG格式文件,且不超过500kb
基本用法

组件默认为点击上传,并且会展示默认上传按钮;通过action指定上传的地址;如果要支持多选可以添加multiple属性;可以通过tip扩展点来添加提示信息;beforeRemove可以在删除文件之前进行确认,如果函数的返回值为true则删除文件,否则不删除,该函数可以是异步函数或者返回Promise对象

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
将文件拖到此处,或点击上传
拖拽上传

通过指定typedrag可以展示拖拽上传组件

如果你没有给组件指定子元素,则组件会默认根据type展示不同的内容,否则会展示你指定的元素

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
照片墙

指定typegallery可以展示照片墙风格的上传组件;我们还可以通过limit限制最大上传数量,当超过该数量时,组件会抛出error事件;通过accept可以指定上传的文件类型:accept

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
test1.jpg
test2.png
定义初始化列表

你可以通过defaultFiles定义初始化上传列表,该属性取值为数组,数组每一项结构如下:

  1. name 文件名
  2. url 文件对应的url地址
index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
手动上传

手动上传需要通过指定autoUploadfalse来关闭自动上传,然后调用组件的submit方法来手动上传

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
上传文件夹

添加directory属性可以上传文件夹 caniuse

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
accept inputaccept属性,支持的文件的类型 String undefined
multiple inputmultiple属性,是否支持多选 Boolean false
type 组件风格 "select" | "drag" | "gallery" "select"
autoUpload 是否选择文件后即自动上传 Boolean true
disabled 是否禁用上传 Boolean false
action 上传地址 String ""
name 指定上传文件字段名,不存在时,组件默认会使用原始文件名 String undefined
headers 指定上传的请求头 Object undefined
data 指定上传附加的请求数据,可以为对象或者函数,为函数时,组件会将当前文件对象作为参数传入,函数应返回一个对象作为附加数据 Object | Function undefined
withCredentials 指定跨域请求是是否允许传送cookie Boolean false
limit 最大上传文件数量限制,默认无限制 Number undefined
maxSize 最大上传文件大小限制(kb),默认无限制 Number undefined
defaultFiles 指定初始化上传列表,见示例 Array<Object> undefined
beforeUpload 指定文件在开始上传之前的处理逻辑,如果该函数返回false,则取消上传,你也可以使用异步函数或返回Promise对象;组件会将当前文件(file)和文件列表(files)传给该函数 Function () => true
beforeRemove 指定文件在删除之前的处理逻辑,如果该函数返回false,则取消删除,你也可以使用异步函数或返回Promise对象;组件会将当前文件(file)和文件列表(files)传给该函数 Function () => true
files 所有已上传和待上传的文件列表 Array []
directory 是否支持上传文件夹 caniuse Boolean false

扩展点

名称 说明
content 组件展示的内容,当没有子元素时,默认会根据type展示不同的内容
tip 组件展示的提示信息

方法

方法名 说明 参数 返回值
submit 手动上传时,调用该方法开始上传 - undefined

事件

事件名 说明 参数
error 文件超出最大文件数量限制,超出文件大小限制,或者上传失败都会抛出该事件 Error, file, files
progress 文件上传过程中会抛出该事件 Event, file, files
success 文件上传成功时会抛出该事件 response, file, files