若依自带vue-cropper上传图片（可旋转、缩放）

2024.4.4今天我学习了如何使用若依的vue-cropper上传图片组件，在工作中遇到一个需求，需要对上传的图片进行旋转的操作，然后我先找到el-upload组件，使用之后发现它有一个自动上传和非自动上传的功能，是不是就可以通过非自动上传的功能然后跳一个弹窗，在弹窗里面进行操作再上传。

一、用el-upload

在使用非自动上传之后用on-change事件来触发一个弹窗，把上传的图片先放大显示，然后下面放一个左右旋转的按钮，通过ref  this.$ref.xxx.style.transform修改样式进行旋转，但是这样只能单纯的旋转图片，不能把旋转之后的图片保存下来。

官方地址：

Element - The world's most popular Vue UI framework

二、用vue-cropper

后来百度找到若依有自带上传图片旋转的方法。

官方地址：若依管理系统

官方代码地址：ruoyi-ui/src/views/system/user/profile/userAvatar.vue · 若依/RuoYi-Vue - Gitee.com

相关属性：

ref="cropper"：为裁剪器组件指定一个引用名称，以便在其他地方引用和操作该组件。
:img="option.img"：指定要裁剪的图片的路径或数据。option.img 是一个变量，用于存储图片的信息。
:outputSize="option.size"：指定裁剪后的输出尺寸大小。option.size 是一个变量，用于存储输出尺寸的信息。
:outputType="option.outputType"：指定裁剪后的输出类型。option.outputType 是一个变量，用于存储输出类型的信息。
:info="true"：启用/禁用裁剪器的信息面板，用于显示裁剪框的位置和尺寸等信息。
:full="option.full"：指定是否允许裁剪器占满整个父容器的大小。
:canMove="option.canMove"：指定是否允许移动裁剪框。
:canMoveBox="option.canMoveBox"：指定是否允许移动整个裁剪区域。
:original="option.original"：指定是否使用原始图片进行裁剪，而不是经过缩放的图片。
:autoCrop="option.a