Upload 上传

通过点击或者拖拽上传文件

点击上传

用户头像上传

使用 before-upload 限制用户上传的图片格式和大小。

照片墙

使用 list-type 属性来设置文件列表的样式。

文件缩略图

使用 slot 来设置缩略图模版。

图片列表缩略图

上传文件列表控制

通过 on-change 钩子函数来对列表进行控制

拖拽上传

你可以把文件拖到一个特定的区域来上传它。

手动上传

属性

属性描述类型可选值默认值
action必选参数,上传的地址string
headers设置上传的请求头部object
method设置上传请求方法stringpost/put/patchPOST
multiple是否支持多选文件boolean
data上传时附带的额外参数object
name上传的文件字段名stringfile
with-credentials支持发送 cookie 凭证信息booleanfalse
show-file-list是否显示已上传文件列表booleantrue
drag是否启用拖拽上传booleanfalse
accept接受上传的 文件类型(thumbnail-mode 模式下此参数无效)string
on-preview点击文件列表中已上传的文件时的钩子function(file)
on-remove文件列表移除文件时的钩子function(file, fileList)
on-success文件上传成功时的钩子function(response, file, fileList)
on-error文件上传失败时的钩子function(err, file, fileList)
on-progress文件上传时的钩子function(event, file, fileList)
on-change文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用function(file, fileList)
before-upload上传文件之前的钩子,参数为上传的文件。 若返回 false 或者返回 Promise 且被 reject,则终止上传。function(file)
before-remove删除文件之前的钩子,参数为上传的文件和文件列表。 若返回 false 或者返回 Promise 且被 reject,则终止删除。function(file, fileList)
thumbnail-mode是否显示缩略图booleanfalse
file-list上传的文件列表,例如:[{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]array[]
list-type文件列表的类型stringtext/picture/picture-cardtext
auto-upload是否自动上传文件booleantrue
http-request覆盖默认的 xhr 行为,允许您实现自己的上传文件请求function
disabled是否禁用booleanfalse
limit允许上传的最大数量number
on-exceed文件超出个数限制时的钩子function(files, fileList)-

插槽

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

方法

方法名描述参数
clearFiles清空已上传的文件列表(该方法不支持在 before-upload 中调用)
abort取消上传请求( file: fileList 中的 file 对象 )
submit手动上传文件列表