vue+element实现图片上传及裁剪功能（vue-cropper）
背景
vue-cropper是一款基于vue的优雅图片裁剪插件，可用来实现头像等功能。
效果图
文章图片
安装使用
安装
npm install vue-cropper // npm 安装yarn add vue-cropper // yarn 安装
引用
// 全局引用main.js
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)// 局部引用
import VueCropper from 'vue-cropper'
components: {
VueCropper
}, 组件内使用
1. 上传按钮
点击上传
支持绝大多数图片格式，单张图片最大支持5MB
2. 设置一个弹出层，放剪裁图片的cropper
更换图片
清除图片
左旋转
右旋转
放大
缩小
下载 取 消
确认 3. 剪裁框的样式
.cropper-content {
.cropper {
width: auto;
height: 350px;
}
}4. 方法 option是剪裁插件的属性配置，具体更多含义查看官网介绍
【vue+element实现图片上传及裁剪功能（vue-cropper）】注：练习代码指路
