feat: ✨ 添加单图上传组件和使用示例

src/views/demo/upload.vue

@@ -2,8 +2,38 @@
 <script setup lang="ts">
 import ImageUpload from "@/components/Upload/ImageUpload.vue";
 import FileUpload from "@/components/Upload/FileUpload.vue";
-const size = ref("");
-// 这里放外链图片，防止被删
+
+// 单图
+const picUrl = ref("https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg");
+
+const singleImageUploadArgData = [
+  {
+    argsName: "v-model",
+    type: "String",
+    default: "",
+    desc: "已经上传的图片URL",
+  },
+  {
+    argsName: "size",
+    type: "String",
+    default: "148px",
+    desc: "图片上传组件的尺寸大小",
+  },
+  {
+    argsName: "maxSize",
+    type: "Number",
+    default: "10",
+    desc: "单个图片上传大小限制(单位M)",
+  },
+  {
+    argsName: "accept",
+    type: "String",
+    default: "",
+    desc: "上传文件类型",
+  },
+];
+
+// 多图
 const picUrls = ref([
   "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
   "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
@@ -11,10 +41,11 @@ const picUrls = ref([
   "https://s2.loli.net/2023/05/24/e1bcnEq3MFdmlNL.jpg",
   "https://s2.loli.net/2023/05/24/wZTSPj1yDQNcuhU.jpg",
 ]);
+
 const imageUploadArgData = [
   {
     argsName: "v-model",
-    type: "Arrays",
+    type: "Array",
     default: "[]",
     desc: "已经上传的图片数组",
   },
@@ -184,7 +215,19 @@ const fileUploadArgData = [
     </el-link>
 
     <el-form>
-      <el-form-item label="图片上传">
+      <el-form-item label="单图上传">
+        <SingleImageUpload v-model="picUrl" />
+      </el-form-item>
+      <el-form-item label="参数说明">
+        <el-table :data="singleImageUploadArgData" 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="多图上传">
         <image-upload v-model="picUrls" />
       </el-form-item>
       <el-form-item label="参数说明">
@@ -195,6 +238,7 @@ const fileUploadArgData = [
           <el-table-column prop="desc" label="描述" width="300" />
         </el-table>
       </el-form-item>
+
       <el-form-item label="文件上传">
         <file-upload v-model="fileUrls" />
       </el-form-item>