1.0.9 • Published 3 years ago
upload-img-cropper-js v1.0.9
配置环境
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)
}