Vue - 图片裁剪并上传到服务器（vue-cropper）

前言

您可以滑动到文章最底部，直接克隆完整示例 Gitee 仓库，与本文教程最终效果一致。

在项目开发中，您难免会遇到图片上传到服务器之前，用户可进行裁剪的需求，

在看了网上大部分教程后，代码都非常乱且没有注释，而且全都是裁剪插件的 “使用” 教程，并没有讲述裁剪完毕后如何调用接口上传到服务器，对刚接触此需求的开发者完全是难上加难。

本示例基于 Vue + ElementUI 框架（其他 UI 框架换个上传组件即可）的图片裁剪及上传到服务器的示例，代码干净整洁、注释详细、扩展性强，新手可直接上手改造，功能功能如下图所示：

准备工作

感谢前辈提供的优秀插件，感兴趣可前往 效果演示 | Github 查看。

首先安装插件，您需要在项目根目录执行如下命令：

npm i vue-cropper