refactor: ♻️ 上传组件示例调整

src/views/demo/upload.vue

@@ -11,33 +11,17 @@
     </el-link>
 
     <el-form>
-      <el-form-item label="绑定值">
-        {{ picUrl }}
-      </el-form-item>
-      <el-form-item label="图片上传">
-        <MultiImageUpload v-model="picUrls" :maxFileSize="10" :limit="3" accept=".png" />
+      <el-form-item label="单图上传">
         <SingleImageUpload v-model="picUrl" accept=".png" style="width: 120px; height: 120px" />
       </el-form-item>
-      <el-form-item label="参数说明">
-        <el-table :data="imageUploadArgData" 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 label="多图上传">
+        <MultiImageUpload v-model="picUrls" />
       </el-form-item>
 
       <el-form-item label="文件上传">
         <FileUpload v-model="fileUrls" />
       </el-form-item>
-      <el-form-item label="参数说明">
-        <el-table :data="fileUploadArgData" 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>
   </div>
 </template>
@@ -49,176 +33,8 @@ import MultiImageUpload from "@/components/Upload/MultiImageUpload.vue";
 const picUrl = ref("https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg");
 const picUrls = ref(["https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg"]);
 
-const imageUploadArgData = [
-  {
-    argsName: "v-model",
-    type: "[Array,String]",
-    default: "[]  |  ''",
-    desc: "已经上传的图片数组,单张图片时为String",
-  },
-  {
-    argsName: "action",
-    type: "String",
-    default: "FileAPI.uploadUrl",
-    desc: "文件上传地址",
-  },
-  {
-    argsName: "headers",
-    type: "Object",
-    default: "{Authorization: localStorage.getItem(TOKEN_KEY),}",
-    desc: "上传请求头",
-  },
-  {
-    argsName: "data",
-    type: "Object",
-    default: "{}",
-    desc: "请求携带的额外参数",
-  },
-  {
-    argsName: "name",
-    type: "String",
-    default: "file",
-    desc: "上传文件的参数名",
-  },
-  {
-    argsName: "limit",
-    type: "Number",
-    default: 1,
-    desc: "上传最大的图片数量,多张图片时填写最大上传数量，默认单张图片",
-  },
-  {
-    argsName: "show-del-btn",
-    type: "Boolean",
-    default: true,
-    desc: "是否显示删除按钮",
-  },
-  {
-    argsName: "show-upload-btn",
-    type: "Boolean",
-    default: true,
-    desc: "是否显示上传按钮",
-  },
-  {
-    argsName: "max-size",
-    type: "Number",
-    default: "10",
-    desc: "单个图片上传大小限制(单位MB)",
-  },
-  {
-    argsName: "accept",
-    type: "String",
-    default: "image/*",
-    desc: "上传文件类型",
-  },
-  {
-    argsName: "supportFileType",
-    type: "Array",
-    default: "[]",
-    desc: "支持的文件类型,默认支持所有图片格式,eg:['png','jpg','jpeg','gif']",
-  },
-  {
-    argsName: "isSyncDelete",
-    type: "Boolean",
-    default: "true",
-    desc: "是否同步删除服务端文件(默认是，如果为否，则只会删除当前上传的图片，已经上传到服务端到图片不会删除)",
-  },
-  {
-    argsName: "style",
-    type: "Object",
-    default: "{width: '130px',height: '130px'}",
-    desc: "上传组件的样式",
-  },
-];
-
 const fileUrls = ref([
   "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
   "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
 ]);
-
-const fileUploadArgData = [
-  {
-    argsName: "v-model",
-    type: "Arrays",
-    default: "[]",
-    desc: "已经上传的文件数组",
-  },
-  {
-    argsName: "action",
-    type: "String",
-    default: "FileAPI.uploadUrl",
-    desc: "文件上传地址",
-  },
-  {
-    argsName: "limit",
-    type: "Number",
-    default: 10,
-    desc: "上传最大的文件数量",
-  },
-  {
-    argsName: "show-del-btn",
-    type: "Boolean",
-    default: true,
-    desc: "是否显示删除按钮",
-  },
-  {
-    argsName: "show-upload-btn",
-    type: "Boolean",
-    default: true,
-    desc: "是否显示上传按钮",
-  },
-  {
-    argsName: "max-size",
-    type: "Number",
-    default: "10",
-    desc: "单个文件上传大小限制(单位MB)",
-  },
-  {
-    argsName: "accept",
-    type: "String",
-    default: "*",
-    desc: "上传文件类型",
-  },
-  {
-    argsName: "upload-btn-text",
-    type: "String",
-    default: "上传文件",
-    desc: "上传按钮文本",
-  },
-  {
-    argsName: "show-tip",
-    type: "Boolean",
-    default: false,
-    desc: "是否显示提示",
-  },
-  {
-    argsName: "tip",
-    type: "String",
-    default: '""',
-    desc: "提示文本",
-  },
-  {
-    argsName: "headers",
-    type: "Object",
-    default: "{Authorization: localStorage.getItem(TOKEN_KEY),}",
-    desc: "提示文本类型",
-  },
-  {
-    argsName: "data",
-    type: "Object",
-    default: "{}",
-    desc: "请求携带的额外参数",
-  },
-  {
-    argsName: "name",
-    type: "String",
-    default: "file",
-    desc: "上传文件的参数名",
-  },
-  {
-    argsName: "style",
-    type: "Object",
-    default: "{width:'300px'}",
-    desc: "上传组件的样式",
-  },
-];
 </script>