Upload 上传

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

基础用法

通过 slot 你可以传入自定义的上传按钮类型和文字提示。

用户头像上传

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

照片墙

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

图片列表缩略图

拖拽上传

特色功能：图片裁剪 (Cropper)

当上传图片时，开启 cropper 属性，可以在上传前对图片进行裁剪。支持拖拽移动和滚轮缩放。

特色功能：故障风 (Glitch Effect)

开启 glitch 属性，上传中的文件列表将展示赛博朋克风格的故障抖动动画。

特色功能：声音反馈 (Sound Feedback)

开启 sound 属性，上传成功或失败时会播放不同的提示音效（无需引入外部音频文件）。

特色功能：进度条类型 (Progress Type)

通过 progress-type 属性设置上传时的进度条样式，支持 line (默认)、circle 和 dashboard。

手动上传

Upload 属性

属性	说明	类型	可选值	默认值
action	请求 URL	string	—	—
headers	设置上传的请求头部	object	—	—
method	设置上传请求方法	string	—	post
multiple	是否支持多选文件	boolean	—	—
data	上传时附带的额外参数	object	—	—
name	上传的文件字段名	string	—	file
with-credentials	支持发送 cookie 凭证信息	boolean	—	false
show-file-list	是否显示已上传文件列表	boolean	—	true
drag	是否启用拖拽上传	boolean	—	false
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)	—	—
list-type	文件列表的类型	string	text / picture / picture-card	text
http-request	覆盖默认的上传行为，可以自定义上传的实现	function	—	—
limit	最大允许上传个数	number	—	—
on-exceed	文件超出个数限制时的钩子	function(files, fileList)	—	—
cropper	(特色) 是否开启图片上传前裁剪功能	boolean	—	false
glitch	(特色) 是否开启上传列表故障风效果	boolean	—	false
progress-type	(特色) 进度条类型	string	line / circle / dashboard	line
sound	(特色) 是否开启上传成功/失败声音反馈	boolean	—	false

Upload 插槽

插槽名	说明
default	默认插槽，上传按钮的内容
trigger	触发文件选择的内容
tip	提示说明文字
file	自定义文件列表的内容

Upload 方法

方法名	说明	参数
clearFiles	清空已上传的文件列表（该方法不支持在 before-upload 中调用）	—
abort	取消上传请求	(file: UploadFile)
submit	手动上传文件列表	—