## 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 |