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

前言

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

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

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

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

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

<