feat(RenderCropper): 优化图片上传和裁剪功能

- 添加 beforeUpload 方法，支持文件预处理
- 修改 change 方法参数，增加文件列表
- 调整上传组件样式，限制文件类型- 优化裁剪区域大小和位置
- 修复部分样式问题，增加禁用状态样式

src/components/RenderCropper/index.vue

@@ -1,15 +1,15 @@
 <template>
-  <div>
+  <div style="width: 100%;height: 100%">
     <el-upload
       action="#"
       list-type="picture-card"
       :auto-upload="false"
-      :limit="1"
       :file-list="fileList"
       :on-change="change"
+      accept=".png,.jpg"
     >
       <i slot="default" class="el-icon-plus"></i>
-      <div slot="file" slot-scope="{ file }">
+      <div slot="file" slot-scope="{ file }" style="width: 100%;height: 100%">
         <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
         <span class="el-upload-list__item-actions">
           <span class="el-upload-list__item-delete" @click="handleRemove(file)">
@@ -34,6 +34,7 @@
             rotatable
             scalable
             skewable
+            initial-center-size="none"
             translatable
           ></cropper-image>
           <cropper-shade hidden></cropper-shade>
@@ -42,10 +43,12 @@
             id="cropperSelection"
             movable
             resizable
+            hidded
+            hidden
             x="150"
             y="100"
-            width="275"
+            width="50"
-            height="275"
+            height="50"
             ref="selection"
           >
             <cropper-handle
@@ -136,11 +139,21 @@ export default {
   },
   filters: {},
   methods: {
+    beforeUpload(files, list) {
+      this.file = files[0]
+      this.fileList = files
+      this.visible = true
+      setTimeout(() => {
+        this.cropper = new Cropper('#image', {})
+      }, 300)
+    },
+
     handleRemove() {
       this.fileList = []
     },
-    change(file) {
+    change(file, list) {
       this.file = file
+      // this.fileList = []
       this.fileList = []
       this.visible = true
       setTimeout(() => {
@@ -236,4 +249,9 @@ cropper-canvas {
   //width: 20vw;
   max-height: 30vw !important;
 }
+
+.is-disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
 </style>