结合vue-cropper与element ui实现头像图片剪切上传

首先，安装vue-cropper。执行如下安装命令，等待安装完成即可。

$ yarn add vue-cropper
yarn add v1.17.3
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
[5/5] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
Done in 54.39s.

组件代码：

最终浏览器渲染效果：

result.png

注意事项：
1.element ui中的组件upload设置:auto-upload="true"，选择后自动上传；action="https://jsonplaceholder.typicode.com/posts/"这个必填参数随便填写一个值就行。因为我们只用到一个选择文件功能，文件的上传后台自己写。
2.将获取的选取文件做一下转化：let data = window.URL.createObjectURL(new Blob([file]));之后将之绑定到vue-cropper上。

整体来说，vue-cropper很强大，使用也很简单。