vue---vueCropper实现图像裁剪

案例功能：选择图像->图像裁剪->上传图像（base64），完整代码见篇末。

(提示：下文实现方法太low了，现在觉得惨不忍睹，就当是学习笔记吧，实现功能前还是要勤思考，要不然写出来的代码重复啰嗦，自己都看不下去。还是参照优化版本 vue---图像上传/裁剪/预览/删除/查询

实现效果：点击【添加照片】方形区域（图一）打开文件夹选择图片，选择完成后弹出裁剪图片的对话框（图二），点击【点击上传】按钮向后台提交图片。

选择图像：一共可上传3张照片，当没有照片上传时，仅有一个【添加照片】区；当第一张图片上传成功，【添加照片】出现在该图片后的第二个位置；当第二张图片上传成功，【添加照片】出现在该图片后的第三个位置；当第三张图片上传成功，【添加照片】不再出现。鼠标移入图片出现删除图标，可点击进行删除操作。

图像裁剪：可对图片进行放大、缩小、左旋转、右旋转、下载及预览功能。

     （图一）

 （图二）

执行步骤：

1.安装【npm install vue-cropper --save-dev】

2.在main.js中或使用到的组件中引入vue-cropper

①main.js:

import Vue from 'vue'
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

②组件中

3.使用VueCropper

为了方便测试，已注释后台联调代码部分。只要不气馁，问题总会解决~VueCropper具体属性见npm

附完整代码：