如何使用Vue实现图片裁剪并完成上传操作？

本文共计2281个文字，预计阅读时间需要10分钟。

原文示例：本文字例为大师分享了vue实现图片裁剪后上传的具体代码，供大家参考。具体内容如下：

一、背景目前负责的系统（商城后台管理系统）中有一个需求，为了配合前台的表现，需要实现图片裁剪后上传的功能。

二、具体内容

1.背景图片

2.目前的负责的系统（商城后台管理系统）中有一个需求，为了配合前台的表现，需要实现图片裁剪后上传的功能。

本文实例为大家分享了vue实现图片裁剪后上传的具体代码，供大家参考，具体内容如下

一、背景

目前负责的系统（商城后台管理系统）里面有这么一个需求，为了配合前台的展示，上传的商品图片比较必须是1:1的正方形。（其它地方有时会有5:4或者16:9的需求，但较少）。所以需要对上传的图片先进行裁剪，并且按要求只能裁剪为1:1，然后在进行上传。

当然，为了兼容系统其它地方有5:4或者16:9的图片比例需求，需要给出一个参数，可以随时控制图片裁剪的比例。

二、使用什么插件实现

使用 vue-cropper 显示，该插件是基于 cropper 的二次封装，简单小巧，更合适vue项目。注意：功能没有 cropper 强大。