前些日子做了一个项目关于vue项目需要头像裁剪上传功能，看了一篇文章，在此基础上做的修改完成了这个功能，与大家分享一下。原文：http://www.gxlcms.com/article/135719.htm
首先下载引入cropper js，
在需要的页面引入：import Cropper from "cropper js"
html的代码如下：
主要是js代码，如下
1，data里面定好初始变量，绑定数据，imgCropperData是我定义的判断图片格式的。
2，在mounted里面初始换裁剪框
3.methods的方法比较多，包括创建URL路径，input框change事件，canvas画图，确定提交上传。我还加了取消事件函数，判断上传文件的类型和大小。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何在vue2中设置全局变量？（详细教程）
如何在JS中实现字符串拼接的功能（扩展String.prototype.format）
利用ES6通过WeakMap解决内存泄漏问题（详细教程）