# Upload 上传

通过点击或拖拽上传文件

### 点击上传

当获取文件完成时自动上传文件至服务器

@[demo](demo/basic.vue)

### 手动上传

通过手动点击上传文件到服务器

@[demo](demo/manually.vue)

### 多文件上传

可以一次性打开多个文件进行上传，同时还可以设置最多上传个数

@[demo](demo/multipe-upload.vue)

### 拖拽上传

通过手动拖动文件进行上传

@[demo](demo/drag.vue)

### 照片墙

@[demo](demo/picture-card-list-demo.vue)

### 照片墙自定义slot

@[demo](demo/picture-card-list-slot-demo.vue)

### 图片列表缩略图

@[demo](demo/picture-list-demo.vue)

### 自定义上传按钮

@[demo](demo/custome-trigger.vue)

### props

| 参数            | 说明                                                         | 类型     | 默认值   |
| --------------- | ------------------------------------------------------------ | -------- | -------- |
| url             | 接收文件的目标上传服务地址                                   | String   | -        |
| name            | 请求参数名                                                   | String   | file     |
| extraData       | 上传时的额外数据                                             | Object   | -        |
| defaultFileList | 默认已经上传的文件列表                                             | `FileItem`   | []        |
| accept          | 接受上传的文件类型，具体参考[Input Accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)。如果 `listType` 为`picture` 或 `pictureCard` 时，accept 的时为 `image/*` | String   | -        |
| multiple        | 是否支持多文件上传                                           | Boolean  | false    |
| disabled        | 是否禁用                                                     | Boolean  | false    |
| drag            | 是否启用拖拽上传                                             | Boolean  | false    |
| auto            | 获取本地文件后是否自动上传                                   | Boolean  | true     |
| listType        | 上传列表类型，可选值范围：picture (图片)\| pictureCard（图片卡片） \| text （文本格式） | String   | text     |
| headers         | 设置上传请求头部                                             | Object   | -        |
| withCredentials | 上传请求时是否携带请求认证信息，[XMLHttpRequest.withCredentials](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials) | Boolean  | false    |
| limit           | 最多允许上传的文件个数                                       | Number   | Infinity |
| maxSize         | 最大允许上传的单个文件大小，格式为带单位的文件字节大小 `5 MB` | String   | -        |
| customRequest   | 覆盖组件内部提供的 Ajax 上传功能，自定义上传逻辑。最终需要返回一个 `XMLHttpRequest` 实例。 | Function | -        |
| hasPreview      | 是否显示预览按钮                                       | Boolean   | true |
| onChange        | 当获取到本地文件的时候。接收两个参数 ：`onChange(event, Array newFiles)`；事件对象和新获取到的文件列表。 | Function | -        |
| beforeUpload    | 在文件上传到服务器之前。接收两个参数：`beforeUpload(File file, Array files)`；第一个为当前准备上传的文件，第二个为当前所有文件列表。返回值为 `Boolean` 或一个 `Promise` ，如果返回值为 `falsely` 则不会上传当前文件，而且当前文件会从上传列表中删除。 | Function | -        |
| onProgress      | 文件上传过程中的上传进度发生变化时回调。接收一个参数，表示当前的上传实例：`{file: File, progress: Number, status: 'padding | uploading | error | success | exceed', xhr: XMLHttpRequest}` | Function | -        |
| onSuccess       | 文件上传成功时回调。参数同 `onProgress`                      | Function | -        |
| onError         | 文件上传失败时回调。参数同 `onProgress`                      |          |          |
| onExceed        | 上传文件超过允许的最大上传个数回调。参数 `onExceed(Number currentLen, Number limit)` | Function | -        |
| onOverSize      | 上传文件超过允许的最大上传文件大小时的回调。参数 `onOverSize(Array overSizeFiles, Array files)` | Function | -        |
| onPreview       | 当点击文件列表的某一个文件时，可以用于自定义预览。参数`onPreview(File currentFile, Array files)` | Function | -        |
| onRemove        | 当某一文件从列表中删除的时候的回调。参数 `onRemove(File deletedFile, Array afterDeletedFiles)` | Function | -        |

### FileItem
| 属性            | 说明                                                         | 类型     | 默认值   |
| --------------- | ------------------------------------------------------------ | -------- | -------- |
| size             | 大小, 单位为 kb                            | Number   | -        |
| name            | 文件名                            | String   | -        |
| type            | 文件类型                            | String   | -        |
| url            | 文件 url                           | String   | -        |

### slots

| name           | 说明             | slot-scope |
| -------------- | ---------------- | ---------- |
| trigger        | 自定义上传按钮   | -          |
| manual-trigger | 手动上传控制按钮 | -          |