#
## ImageCrop 头像裁剪
图片剪裁上传组件 该组件适用于pc端，不推荐手机端使用
##### 基本用法
~~~
<abc-imagecrop field="file" @crop-success="cropSuccess" @crop-upload-success="cropUploadSuccess"
@crop-upload-fail="cropUploadFail"
v-model="imagecropModal" :width="230" :height="150" url="http://upload.qiniu.com"
:params="imagecropParams" img-format="png"></abc-imagecrop>
data: {
imagecropModal: true,
params: {
token: '123456798',
name: 'avatar'
}
},
methods: {
openPicCrop: function () {
let self = this;
self.imagecropModal = true;
$.ajax({
url: '/Qiniu/getUpTokenFaces', //获取七牛token
type: "GET",
success: function (res) {
if (res.status) {
self.imagecropParams.token = res.data.uptoken;
self.imagecropDomain = res.data.domain;
let timestamp = Date.parse(new Date());
timestamp = timestamp / 1000;
let key = 'teacheravatar' + timestamp;
self.imagecropParams.key = key;
}
}
});
},
cropSuccess(imgDataUrl, field) {
console.log('-------- crop success --------');
},
cropUploadSuccess(jsonData, field) {
console.log('-------- upload success --------');
}
}
~~~
##### Screenshot
#### 属性:
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :--- | :--- | :--- | :--- | :--- |
| field | 向服务器上传的文件名 | String | 'file' | |
| v-model | 是否显示控件，双向绑定 | Boolean | | |
| url | 上传接口地址 | String | | |
| params | 上传附带其他数据 | Object | | |
| headers | 上传header设置 | Object | | |
| width | 最终得到的图片宽度 | Number | | 200 |
| height | 最终得到的图片高度 | Number | | 200 |
| imgFormat | 最终得到的图片格式 | String | | - |
#### 事件：
| 事件名 | 说明 | 回调参数 |
| :--- | :--- | :--- |
| cropSuccess | 图片截取完成事件（上传前\) | imageDataUrl, field |
| cropUploadSuccess | 上传成功 | jsonData, field |
| cropUploadFail | 上传失败 | status, field |
