Vue项目图片剪切上传——vue-cropper的使用

最近自己在研究vue，然后做了一个小型的后台管理系统用来练手，开发过程中，想到了剪切图片上传用户头像的需求。上网百度了一番，发现好多用的都是vue-cropper。我也就用了，个人感觉还是挺好用的。现在在这里用一个简单的小demo演示一下vue-cropper的使用方法。

其中上传用户头像的接口是java写的，感兴趣的话可以参考我的2017年12月2号的博客：

1、安装vue-cropper

使用npm本地安装vue-cropper

npm install vue-cropper --save-dev

2、新建一个test.vue文件

该文件只做用来演示剪切上传图片的功能，下面直接贴出代码

test.vue：

其中，js/api.js文件是配置的接口地址

3、效果

1、打开页面效果

2、点击选择图片按钮，选择完本地图片后的效果

选择完图片后，就可以对图片进行放大，缩小以及旋转等，并且可以移动选中框，选择上传图片的任意部分

3、点击上传头像按钮，即可调用上传头像的接口，把头像上传到文件服务器

此时，图片便已上传成功了，查看图片服务器指定的目录，即可查看到图片已经在服务器上了

 需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07