upload-img-cropper-js

配置环境

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)
}