Upload 上传

accept 文件类型

accept 取值与 HTML input[type=file] 的 accept 属性一致，用于限制可选文件后缀或 MIME 类型。

规则

基础示例

Props 配置示例

单图片上传

多图片上传

文件上传

拖拽上传

上传前验证

自定义上传请求

整段禁用

Events 事件示例

监听上传事件

完整配置项:TinyVue Upload

value :Array | String

注意

文件上传成功后需要通过 onSuccess 回调, 将接口返回内容中的 url 赋值给 file.url.否则表单获取不到组件的数据

Props

名称	描述	类型	默认值
action required	请求 URL	string	#
uploadType	上传文件类型	String	image（图片上传），file（文件上传）
headers	设置上传的请求头部	object	—
method	设置上传请求方法	string	post
multiple	是否支持多选文件	boolean	false
data	上传时附带的额外参数 从 v2.3.13 支持 Awaitable 数据，和 Function	object / Function	{}
name	上传的文件字段名	string	file
withCredentials	支持发送 cookie 凭证信息	boolean	false
showFileList	是否显示已上传文件列表	boolean	true
drag	是否启用拖拽上传	boolean	false
accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效）	string	''
crossorigin	原生属性 crossorigin	enum	—
onPreview	点击文件列表中已上传的文件时的钩子	Function	—
onRemove	文件列表移除文件时的钩子	Function	—
onSuccess	文件上传成功时的钩子 function (res, file) {file.url = res.data.filePath;} 通过给回调中的 file.url 赋值回显	function(response, file, fileList)	—
onError	文件上传失败时的钩子	Function	—
onProgress	文件上传时的钩子	Function	—
onChange	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	Function	—
onExceed	当超出限制时，执行的钩子函数	Function	—
beforeUpload	上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。	Function	—
beforeRemove	删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除。	Function	—
listType	文件列表的类型	enum	text
autoUpload	是否自动上传文件	boolean	true
httpRequest	覆盖默认的 Xhr 行为，允许自行实现上传文件的请求	Function	请参考ajaxUpload
disabled	是否禁用上传	boolean	false
limit	允许上传文件的最大数量	number	—
modalTitle	图片预览弹出框标题文字	String	预览

Slots

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