feat(UPLOAD): ✨ add 单图片裁剪工具

src/views/demo/upload.vue

@@ -23,6 +23,22 @@
         </el-table>
       </el-form-item>
 
+      <el-form-item label="单图裁剪">
+        <ImgCorpper
+          v-model="cprpperValue"
+          :presetMode="{ width: 295, height: 413 }"
+          :title="'上传图片'"
+        />
+      </el-form-item>
+      <el-form-item label="参数说明">
+        <el-table :data="imageCprpperUploadArgData" border>
+          <el-table-column prop="argsName" label="参数名称" width="300" />
+          <el-table-column prop="type" label="参数类型" width="200" />
+          <el-table-column prop="default" label="默认值" width="400" />
+          <el-table-column prop="desc" label="描述" width="300" />
+        </el-table>
+      </el-form-item>
+
       <el-form-item label="多图上传">
         <MultiImageUpload v-model="picUrls" />
       </el-form-item>
@@ -81,6 +97,29 @@ const singleImageUploadArgData = [
   },
 ];
 
+const imageCprpperUploadArgData = [
+  {
+    argsName: "v-model",
+    type: "Object",
+    default: "",
+    desc: "裁剪后图片Base64编码",
+  },
+  {
+    argsName: "presetMode",
+    type: "String",
+    default: "{ width: 295, height: 413 }",
+    desc: "裁剪窗口的长宽，及裁剪图片大小",
+  },
+  {
+    argsName: "title",
+    type: "String",
+    default: "上传图片",
+    desc: "组件内容",
+  },
+];
+
+const cprpperValue = ref();
+
 // 多图
 const picUrls = ref([
   "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",