## Upload 文件上传 文件选择上传和拖拽上传控件。 ### 代码示例 文件上传 >[info] 最基本用法，点击上传，一次选择一个文件。  ```html <cvu-upload action=""> <cvu-button icon="ios-cloud-upload-outline">文件上传</cvu-button> </cvu-upload> ``` 多选 >[info] 设置属性`multiple`，可以选择多个文件。  ```html <cvu-upload action="" multiple> <cvu-button icon="ios-cloud-upload-outline">文件上传</cvu-button> </cvu-upload> ``` 单图上传  ```html <template> <div class="container"> <cvu-upload action="" upload-type="image" :max-size="2048" :max-length="1" @on-success="handleSuccess"> <div class="add-warp"> <div class="add-btn" v-if="!fileData"> <Icon type="md-add" /> </div> <img v-else :src="fileData" alt=""> </div> </cvu-upload> </div> </template> <script> export default { data () { return { fileData: '' } }, mounted () {}, methods: { // 上传成功 handleSuccess(res, file, fileList) { this.fileData = file } } } </script> <style lang="scss" scoped> .container{ width: 100%; padding: 30px; box-sizing: border-box; .add-warp{ position: relative; display: inline-block; vertical-align: middle; width: 80px; height: 80px; text-align: center; line-height: 80px; border: 1px dashed #CDCDCD; border-radius: 6px; overflow: hidden; background: #fff; position: relative; cursor: pointer; img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; } .add-btn{ width: 80px; height: 80px; text-align: center; line-height: 80px; i{ font-size: 26px; color: #999; } } } } </style> ``` 单图/多图上传-文件列表 >[info] 包含已上传图片列表查看、图片预览、已上传图片删除功能  ```html <cvu-upload upload-type="list" multiple action="" :max-size="2048" :max-length="5"></cvu-upload> ``` ### props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | upload-type | 上传文件类型 可选值 image：图片上传 \| list：图片列表上传 \| file：文件上传 | String | image | | headers | 设置上传的请求头部 | Object | {} | | action | 上传的地址，必填 | String | \- | | multiple | 是否支持多选文件 | Boolean | false | | type | 上传控件的类型，可选值为`select`（点击选择），`drag`（支持拖拽） | String | select | | show-upload-list | 是否显示已上传文件列表 | Boolean | true | | disabled | 是否禁用 | Boolean | false | | data | 上传时附带的额外参数 | Object | \- | | name | 上传的文件字段名 | String | file | | accept | 接受上传的文件类型 | String | \- | | format | 支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用 | Array | \[\] | | max-size | 文件大小限制，单位 kb | Number | 2048 | | max-length | 文件数量限制 | Number | 3 | | default-file-list | 默认已上传的文件列表，例如：[{name: 'img1.jpg',url: 'img1.jpg'}]| Array | \[\] | ### events | 事件名 | 说明 | 返回值 | | --- | --- | --- | | before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传 | \- | | on-progress | 文件上传时的钩子 | event, file, fileList | | on-success | 文件上传成功时的钩子 | response, file, fileList | | on-error | 文件上传失败时的钩子 | error, file, fileList | | on-preview | 点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据 | file \- 可以通过 file.response 拿到服务端返回数据 | | on-remove | 文件列表移除文件时的钩子 | file, fileList | | on-format-error | 文件格式验证失败时的钩子 | file, fileList | | on-exceeded-size | 文件超出指定大小限制时的钩子 | file, fileList |