## ClPicture 图片
  支持本地和网络图片，可设置图片宽高，上传图片个数限制,移动端支持拍照上传

### 上传网络图片

直接传入图片地址，可通过传入imgWidth和imgHeight设置图片宽和高,需要传入uploadType且值为web。
```html
<template>
  <cl-picture
  upload-type="web"
  :img-height="imgHeight"
  :img-width="imgWidth"
  v-model="imgUrl"
>
</cl-picture>
<div class="cl-num-wrap" style="margin-top:10px">
  <el-input-number v-model="imgWidth" controls-position="right"  :min="0"></el-input-number>
  <el-input-number v-model="imgHeight" controls-position="right"  :min="0" ></el-input-number>
</div>
</template>
<script>
  export default {
    data() {
      return {
        imgUrl:'',
        imgHeight:0,
        imgWidth:0,
      };
    }
  }
</script>
<!-- upload-picture.vue -->
```

### 本地上传

使用本地图片时必须传入actionUrl上传图片的地址，必须传入uploadType且值为local,支持通过headers传入token使用方法同el-upload
```html
<template>
  <cl-picture
  upload-type="local"
  :img-height="imgHeight"
  :img-width="imgWidth"
  v-model="imgUrl"
  :multiple="true"
  :limit="2"
  @download="handleDownload"
>
</cl-picture>
<div class="cl-num-wrap">
  <el-input-number v-model="imgWidth" controls-position="right"  :min="0"></el-input-number>
  <el-input-number v-model="imgHeight" controls-position="right"  :min="0" ></el-input-number>
</div>
</template>
<script>
  export default {
    data() {
      return {
        imgUrl:'',
        imgHeight:0,
        imgWidth:0,
        headers:{Authorization: "Basic YWRtaW46NEFmeTJzNENiKzhCN2RFWFpIc08vdz09"},
      };
    },
    methods:{
      handleDownload(){
        console.log('我触发了')
      }
    }
  }
</script>
<!-- local-picture.vue -->
```
### ClPicture Attribute
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| multiple | 是否支持多选文件 | boolean | — | true |
| imgHeight | 图片高度 | number/string | — | — |                         |
| imgWidth | 图片宽 | number/string | — | — |
| uploadType | 使用图片类型(本地图片/网络图片) | string | web/local | — |
| allowPreview |是否允许预览 | boolean | — | true |
| allowDownload | 是否允许下载 | boolean | — | true |
| actionUrl | 必选参数，上传的地址 | string | — | — |
| headers | 设置上传的请求头部 | object | — | — |
| with-credentials | boolean | false | 支持发送 cookie 凭证信息 |
| limit | 最大允许上传个数 | number | — | — |
| fileSize | 最大允许上传图片大小 | number | — | 6(M) |
| onProgress | 文件上传时的钩子 | function(event, file, fileList) | — | — |
| onExceed | 文件超出个数限制时的钩子 | function(files, fileList) | — | — |

### 事件说明
| 事件名称 | 说明 | 回调参数 |
| :--- | :--- | :--- |
| onSuccess | 上传成功事件 | response, file, fileList |
| remove | 删除文件 | file(文件信息),files(当前文件列表) |
| download | 下载按钮点击事件 | file(文件信息),files(当前文件列表) |
| preview | 附件名称点击预览事件 params为queryFilter, cb为加载数据后的回调函数 | file(文件信息),files(当前文件列表) |
