2020-02-15 22:19:22 +08:00
|
|
|
|
# 上传 Upload
|
2020-02-18 19:24:45 +08:00
|
|
|
|
如果不在意延迟，我更想用卡车和硬盘。
|
2020-02-15 22:19:22 +08:00
|
|
|
|
## 演示
|
|
|
|
|
|
```demo
|
|
|
|
|
|
basic
|
2020-02-18 13:05:07 +08:00
|
|
|
|
drag
|
|
|
|
|
|
submit-manually
|
2020-02-18 19:24:45 +08:00
|
|
|
|
controlled
|
|
|
|
|
|
on-finish
|
|
|
|
|
|
default-files
|
2020-02-15 22:19:22 +08:00
|
|
|
|
```
|
2020-02-18 19:24:45 +08:00
|
|
|
|
## 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|`()`||
|
