vue-image-crop-upload使用记录
关于vue-image-crop-upload
vue-image-crop-upload是一款将上传图片，然后再对图片进行剪裁的插件。更多的是网站的上传头像，调整头像的功能。
该组件适用于pc端，不推荐手机端使用。
插件实现：
1、无法选定具体区域
2、进度条控制图片的放大与缩小。
3、上一步的按钮操作是返回至上传图片的步骤。
4、保存的图片是预览的图片，可设置保存图片的宽高。
5、预览图片外框分矩形和圆形。
安装
npm install vue-image-crop-upload
使用
Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| url | String | '' | 上传接口地址，如果为空，图片不会上传 |
| method | String | 'POST' | 上传方法 |
| field | String | 'upload' | 向服务器上传的文件名 |
| value | Boolean | twoWay | 是否显示控件，双向绑定 |
| params | Object | null | 上传附带其他数据，格式"{k:v}" |
| headers | Object | null | 上传header设置，格式"{k:v}" |
| langType | String | 'zh' | 语言类型，默认中文 |
| langExt | Object | 语言包自行扩展 | |
| width | Number | 200 | 最终得到的图片宽度 |
| height | Number | 200 | 最终得到的图片高度 |
| imgFormat | string | 'png' | jpg/png, 最终得到的图片格式 |
| imgBgc | string | '#fff' | 导出图片背景色,当imgFormat属性为jpg时生效 |
| noCircle | Boolean | false | 关闭 圆形图像预览 |
| noSquare | Boolean | false | 关闭 方形图像预览 |
| noRotate | Boolean | true | 关闭 旋转图像功能 |
| withCredentials | Boolean | false | 支持跨域 |
Events
| 名称 | 说明 |
|---|---|
| srcFileSet | 用户选取文件之后, 参数( fileName, fileType, fileSize ) |
| cropSuccess | 图片截取完成事件（上传前), 参数( imageDataUrl, field ) |
| cropUploadSuccess | 上传成功， 参数( jsonData, field ) |
| cropUploadFail | 上传失败， 参数( status, field ) |