如何用Vue实现图片裁剪并上传，打造个性化长尾关键词图片编辑功能？

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

原文：本文实例为大家分享了vue实现图片裁剪后上传的具体代码，供大家参考。具体内容如下：一、背景+目标负责的系统（商城后台管理系统）中，有一个这样的需求，为了配合前端的展示，

简化后：本文提供vue图片裁剪上传代码示例，供参考。背景：商城后台管理系统中，有图片裁剪上传的需求，以配合前端展示。

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

一、背景

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

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

二、使用什么插件实现

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