Upload 上传

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

点击上传

Upload 上传 - 图1

用户头像上传

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

Upload 上传 - 图2

照片墙

使用 listType 属性来设置文件列表的样式。

Upload 上传 - 图3

图片列表缩略图

Upload 上传 - 图4

上传文件列表控制

通过 onChange 钩子函数来对列表进行控制

Upload 上传 - 图5

拖拽上传

可将文件拖入指定区域进行上传。

Upload 上传 - 图6

手动上传

Upload 上传 - 图7

Upload Attribute

参数说明类型可选值默认值
action必选参数, 上传的地址string
headers可选参数, 设置上传的请求头部object
multiple可选参数, 是否支持多选文件boolean
data可选参数, 上传时附带的额外参数object
name可选参数, 上传的文件字段名stringfile
withCredentials支持发送 cookie 凭证信息booleanfalse
showFileList是否显示已上传文件列表booleantrue
drag可选参数,是否支持拖拽boolean--
accept可选参数, 接受上传的文件类型(thumbnailMode 模式下此参数无效)string
onPreview可选参数, 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据function(file)
onRemove可选参数, 文件列表移除文件时的钩子function(file, fileList)
onSuccess可选参数, 文件上传成功时的钩子function(response, file, fileList)
onError可选参数, 文件上传失败时的钩子function(err, file, fileList)
onProgress可选参数, 文件上传时的钩子function(event, file, fileList)
onChange可选参数, 文件状态改变时的钩子,上传成功或者失败时都会被调用function(file, fileList)
beforeUpload可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传。function(file)
listType文件列表的类型stringnone/text/picture/picture-cardtext
autoUpload是否在选取文件后立即进行上传booleantrue
fileList上传的文件列表, 例如: {name: 'food.jpeg', url: '[https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'}]array[]
disabled是否禁用booleanfalse
limit最大允许上传个数number
onExceed文件超出个数限制时的钩子function(files, fileList)
httpRequest覆盖默认的上传行为,可以自定义上传的实现function

Methods

方法名说明参数
clearFiles清空已上传的文件列表