图片裁剪插件 ------ vue-cropper

1.下载

npm install vue-cropper 

2. 引包和注册

import { VueCropper }  from 'vue-cropper' 
  components: {
      VueCropper
  }

3.在需要用的地方，放入组件的标签 

     <vueCropper
        ref="cropper"
        :img="cropImg"
        autoCrop
        autoCropWidth="150"
        autoCropHeight="150"
      ></vueCropper>

* img用来指定它裁剪哪张图片，可以传 url、base64、blob
* autoCrop： 代表生成裁剪框，默认为false，所以写上就是true
* autoCropWidth：设置裁剪框宽度
* autoCropHeight: 设置裁剪框高度

4.获取裁剪出来的图片 

this.$refs.cropper.getCropBlob(data => {
   console.log(data) // data 就是裁剪之后的图片
})

 外：

 裁剪出来的文件一般为二进制文件，将裁剪的图片追加到表单对象中，传递给后端接口

const fd=new FormData()  //创建formdata对象
fd.append('photo',data) //将二进制文件追加到表单对象，data表示裁剪后的对象