Upload 上传

使用

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

基础用法

通过 slot 你可以传入自定义的上传按钮类型和文字提示。 可通过设置 limit 和 on-exceed 来限制上传文件的个数和定义超出限制时的行为。 可通过设置 before-remove 来阻止文件移除操作。

覆盖前一个文件

设置 limit 和 on-exceed 可以在选中时自动替换上一个文件。

用户头像

在 before-upload 钩子中限制用户上传文件的格式和大小。

照片墙

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

图片列表缩略图

上传文件列表控制

通过 on-change 钩子函数来对上传文件的列表进行控制。

拖拽上传

你可以将文件拖拽到特定区域以进行上传。

手动上传

自定义图标

设置success-icon、fail-icon、remove-icon可分别定义上传文件成功状态图标、上传文件失败状态图标、移除文件图标。

API

Upload Props

参数名	描述	类型	默认值
action	请求URL	string	#
headers	设置上传的请求头部	object	-
method	设置上传的请求方法	string	post
multiple	是否支持多选文件	boolean	false
data	上传时附带的额外参数，支持Awaitable数据，和Function	object | Function	{}
name	上传的文件字段名	string	file
with-credentials	支持发送cookie凭证信息	boolean	false
show-file-list	是否显示已上传文件列表	boolean	true
success-icon	上传文件成功状态图标	string | Component	'IconCheck'
fail-icon	上传文件失败状态图标	string | Component	'IconWarning'
remove-icon	移除文件图标	string | Component	'IconDelete'
drag	是否支持拖拽上传	boolean	false
accept	接受上传的文件类型（thumbnail-mode模式下此参数无效）	string	''
crossorigin	原生属性crossorigin	enum	-
on-preview	点击文件列表中已上传的文件时的钩子	Function	-
on-remove	文件列表移除文件时的钩子	Function	-
on-success	设置上传的请求头部	Function	-
on-error	设置上传的请求方法	Function	-
on-progress	文件上传时的钩子	Function	-
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	Function	-
on-exceed	当超出限制时，执行的钩子函数	Function	-
before-upload	上传文件之前的钩子，参数为上传的文件， 若返回false或者返回Promise且被reject，则停止上传。	Function	-
before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回false或者返回Promise且被reject，则停止删除。	Function	-
file-list / v-model:file-list	默认上传文件	Function	[]
list-type	文件列表类型	enum	[]
auto-upload	是否自动上传	boolean	true
http-request	设置上传的请求头部	Function	-
disabled	是否禁用上传	boolean	false
limit	限制上传数量	number	-

Upload Methods

方法名	描述	类型
abort	取消上传请求	Function
submit	手动上传文件列表	Function
clearFiles	清空已上传的文件列表（该方法不支持在before-upload中调用）	Function
handleStart	手动选择上传文件	Function
handleRemove	手动移除文件	Function

Upload Slots

插槽名	描述	参数
trigger	自定义触发文件选择框的内容	-
tip	提示说明文字	-
file	缩略图模板的内容	object