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

前言

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

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

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

本示例基于

Vue + ElementUI

框架（其他

UI

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

在这里插入图片描述

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

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

npm i vue-cropper

标签： vue.js 图片裁剪 vue-cropper

本文转载自: https://blog.csdn.net/weixin_44198965/article/details/124376612
版权归原作者 王佳斌 所有，如有侵权，请联系我们删除。