使用场景

基于 a-upload 封装的上传组件，支持使用 v-model、支持多种场景的文件上传、内置文件预览、支持文件夹上传、支持并发上传等场景。

使用示例

基础使用

不需要任何配置

显示代码

多选上传

使用 multiple 开启多选上传，同时使用 limit 指定要上传的文件个数。

文件个数限制（最多 3 个）

第二个文件触发上传失败

上传提示

显示代码

在 a-form-model 中使用

支持嵌套在 a-form-model 中，就像使用 input 表单一样，不同的是，trigger 需要设置为 change。

姓名

证明材料

显示代码

自定义上传内容

自定义上传内容，设置 block 可以将 upload 组件设置成块级元素。

显示代码

文件夹上传

展示成文件夹而不是文件列表的形式。

姓名

证明材料

显示代码

自定义按钮右边的内容

想要显示内置的提示，又想要添加其他功能。

仅限 png、jpg、jpeg、mp4 格式的文件，也可以从素材库添加。

显示代码

文件夹上传

支持多种场景切换查看效果。

文件夹上传

多选上传

拖拽上传

上传提示

自动滚动文件列表

文件个数限制（5 个，多选上传生效）

文件个数超出是否隐藏上传按钮

文件展示类型切换

简单列表

文件列表展示成文件夹形式（仅文件夹上传生效）

获取要提交的数据

姓名

证明材料

显示代码

API

Attributes

参数	说明	类型	可选值	默认值
v-model	受控	Array		[]
limit	上传个数，默认 1 个，如果设置了 multiple 为 false，limit 将始终是 1	Number	Number	1
action	上传地址，如果传递了就使用，否则去取 $api.upload	String	String	''
downloadUrl	文件预览地址，如果传递了就使用，否则去取 $api.download	String	String	''
listType	文件的上传类型，根据不同的 listType 切换成不同的上传样式	String	text | picture | picture-card	text
beforeUpload	同 a-upload 的 beforeUpload，内部做了上传文件的个数限制，且如果文件上传失败了会过滤掉，给出提示，但是不展示在列表里面	Function	Function	(file, fileList) => true
remove	删除文件的回调，同 a-upload 的 remove	Function | Promise	Function	(file) => true
keys	设置默认值的文件列表时，传递的 name 和 url，接口一般返回的是 fileName 和 filePath，默认先取 name 和 url，没有的话再去取 fileName 和 filePath	object	{name: String, url: String}	{name: 'fileName', url: 'filePath'}
block	把上传组件作为一个块级元素	Boolean	Boolean	false
autoHideUploadBtn	是否自动隐藏上传按钮，假如当前是单选，那上传文件已经有一个的时候，按钮就会自动隐藏掉，注意，该参数只在 showDirectory 是 false 的时候支持	Boolean	Boolean	false
fileChange	在 onChange 里面对返回值进行处理，应对返回值不是默认格式的情况，替代 onChange	Function	Function	(info) => info
drag	是否开启拖拽上传	Boolean	Boolean	false
autoScrollFileList	是否自动滚动文件列表，多选上传了很多文件时使用，具体效果请查看文件夹上传的例子	Boolean	Boolean	false
showDirectory	文件夹上传时，不显示具体的文件列表，显示成文件夹的形式，同时 showUploadList 自动变成 false	Boolean	Boolean	false
concurrentNumber	同时上传的并发数量，建议不要超过 50。	Number	Number	10
getFormData()	获取接口需要的表单数据，里面主要是已经组装好的 fileName 和 filePath 字段	Function	Function	() => files

Methods

参数	说明	类型	可选值	默认值
@uploaded	文件完全处理完成的回调（并不代表文件已经全部上传成功），返回已上传成功和失败的文件列表，成功列表里面一定都有 response 对象，注意：okFileList 和 failFileList 字段返回的都是本次所选文件的结果，并不是所有的结果	Function	''	(okFileList, failFileList) => {}

其他更多 API，请移步传送门 (opens new window)