配置环境

vue@2+（或者vue@1）、webpack、es6

安装

npm install upload-img-cropper-js

使用

props

| 名称 | 类型| 默认 | 是否必传字段| 说明 | | --- | --- | --- | --- | --- | | numLimit | Number | 1 | 否 |允许上传的最大个数 | sizeLimit |Number | 10 | 否 |允许上传的最大单个文件的大小 | imgBaseUrl | String | | 是 | 图片上传的服务器路径 | introduceImg | Array | function(){return []} | 否 | 外部传入的图片信息，传入数据格式：[...{...,filePath:图片路径, ... }...] | | postCropWidth | Number | 0 | 否 | 裁剪后图片宽度 | | postCropHeight| Number | 0 | 否 | 裁剪后图片高度 | | isCompress| Boolean | true | 否 | 图片是否压缩 | | compress| String | 0.8 | 否 | 压缩率 | | isCircle| Boolean | false | 否 | 是否裁剪圆形的图片，默认裁剪的是正方形或者长方形 |

Events

| 名称 | 说明 | | --- | --- | | change | 图片上传成功以后，参数{id：，file：图片的信息} | | delete | 点击删除图片之后，参数（file）|

使用示例

<upload-img-cropper 
    :imgBaseUrl="`http://baidu.com/`" 
    :isCircle="true">
</upload-img-cropper>

// 或者 组件里面可以自定义上传的样式
 <upload-img-cropper 
    :imgBaseUrl="`http://test.zhihuifh.cn/`"
    :numLimit="1"
    :isCircle="true"
    @change="getImages($event)" 
    @delete="deleteFile($event)">
  <template v-slot:selecttype>
    <span>更换</span>
  </template>
</upload-img-cropper>

getImages(data) {
    console.log(data)
},
deleteFile(file) {
  console.log(file)
}