Vue - 实现图片裁剪功能，并上传到服务器（内置第三方最优秀的裁剪图片组件，上传到服务器功能）干净整洁无 BUG 的示例源码与超详细的注释，兼容任意浏览器

前言

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

在 vue + elementUI 项目开发中，详细实现图片上传并裁剪功能，并完美对接服务端接口详细教程，

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

---

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

代码干净整洁，无任何乱七八糟的代码，分分钟改造。

准备工作

首先，