vue实现图片裁剪后上传

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

一、背景

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

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

二、使用什么插件实现

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

三、使用 cropper

3.1 封装一下cropper， 配置自己想要的参数

3.2 将 el-upload 和 cropper 组合，封装，其他地方可以直接调用

3.3 其他页面中调用裁剪组件

自此，图片裁剪功能实现！！！

3.4 看一下页面中的效果

​​​​​​​以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。