如何上传图片裁剪（2种方法）

下图为流程

先上传原图，然后再传送裁剪数据，然后后台返回裁剪的数据
注意：以上是后端支持的情况下，如果不支持请用下面的方法

1.下载包cnpm install cropperjs -s

---

2.import ‘cropperjs/dist/cropper.css’
import Cropper from 'cropperjs’
引入js/css文档

---

3.在生命函数引入：mounted() {
const image = this.$refs.img（一定要获得img的Dom元素）
this.cropper = new Cropper(image, {
// 设置为0则裁剪框可以扩展到外部
viewMode: 1,
// 拖动模式 还有一个 none是背景不变裁剪框变
dragMode: ‘move’,
// 头像比例
aspectRatio: 1,
autoCropArea: 1,
// 裁剪框是否可以移动
cropBoxMovable: true,
// 裁剪区域是否可y缩放
cropBoxResizable: false,
// 马赛克背景是否开
background: false,
// 是否可以拖动
movable: true
})
console.log(cropper)
}
4重点.需要裁剪的img要在一个div容器里，img的样式要设置成块级元素
5.最后一步，获得裁剪数据
还记得这个实例对象吗 const cropper = new Cropper 使用 cropper的getData方法就可以获得裁剪的数据

 var a =  this.cropper.getData()
 log(a)  //