naive-ui/demo/documentation/components/upload/zhCN/index.md

上传 Upload

如果不在意延迟，我更想用卡车和硬盘。

演示

basic
drag
submit-manually
controlled
on-finish
default-files

Props

Upload Props

名称	类型	默认值	说明
name	string	'file'	文件在提交表单中的字段名
accept	string	null	接受的文件类型
action	string	null	请求提交的地址
directory	boolean	false	是否支持目录上传，需要浏览器支持
method	string	'POST'	HTTP 请求的方法
multiple	boolean	false	是否支持多个文件
headers	object | (file: UploadFile) => object	null	HTTP 请求需要附加的 Headers
data	object | (file: UploadFile) => object	null	提交表单需要附加的数据
with-credentials	boolean	false	是否携带 Cookie
on-change	(file: UploadFile, fileList: Array<UploadFile>, event?: Event) => any	() => {}	组件状态变化的回调，组件的任何文件状态变化都会触发回调
on-remove	(file: UploadFile, fileList: Array<UploadFile>) => boolean | Promise<boolean>	() => true	文件移除的回调，返回 false 或者 promise resolve false 或者 promise reject 会不执行这次删除
on-finish	(file: UploadFile, fileList: Array<UploadFile>) => UploadFile | void	file => file	文件上传结束的回调，可以修改传入的 UploadFile 或者返回一个新的 UploadFile
default-upload	boolean	false	选择文件时候是否默认上传
file-list	Array<UploadFile>	undefined	文件列表，如果传入组件会处于受控状态
file-list-style	Object	null	文件列表区域的样式
default-file-list	Array<UploadFile>	[]	非受控状态下默认的文件列表
show-cancel-button	boolean	true	是否显示取消按钮（在 pending、uploading、error 的时候展示），点击取消按钮会触发 onRemove 回调
show-remove-button	boolean	true	是否显示删除按钮（在 finished 的时候展示），点击删除按钮会触发 onRemove 回调

UploadFile Type

属性	类型	说明
id	string | number	文件 id，需要唯一，受控状态下必需
name	string	文件名，受控状态下必需
status	'pending' | 'uploading' | 'error' | 'finished' | 'removed'	上传的状态，文件名，受控状态下必需
percentage	number	文件上传进度百分比，在 uploading 状态下生效，受控状态下可不填
file	File	文件对应的浏览器 File 对象，受控状态下可不填

Events

Upload Events

名称	参数	说明
change	(file: UploadFile, fileList: Array<UploadFile>)

Methods

Upload Methods

名称	类型	说明
submit	(fileId?: string | number)	提交当前所有处于 pending 状态的文件
openFileDialog	() => void	打开文件选择对话框

Slots

Upload Slots

名称	参数	说明
default	()

Upload Dragger Slots

名称	参数	说明
default	()