refactor: ♻️ 文件和图片上传组件重构，精简参数和降低代码复杂度

src/components/Upload/MultiImageUpload.vue

@@ -1,57 +1,52 @@
 <!-- 图片上传组件 -->
 <template>
-  <div>
-    <el-upload
-      v-model:file-list="fileList"
-      list-type="picture-card"
-      :before-upload="handleBeforeUpload"
-      :http-request="handleUpload"
-      :data="props.additionalParams"
-      :name="props.fileParamName"
-      :on-success="handleSuccess"
-      :on-error="handleError"
-      :on-exceed="handleExceed"
-      :accept="props.accept"
-      :limit="props.limit"
-    >
-      <el-icon><Plus /></el-icon>
-      <template #file="{ file }">
-        <div style="width: 100%">
-          <image class="el-upload-list__item-thumbnail" :src="file.url" />
-          <span class="el-upload-list__item-actions">
-            <!-- 预览 -->
-            <span class="el-upload-list__item-preview" @click="handlePreviewImage(file.url!)">
-              <el-icon><zoom-in /></el-icon>
-            </span>
-            <!-- 删除 -->
-            <span class="el-upload-list__item-delete" @click="handleRemove(file.url!)">
-              <el-icon><Delete /></el-icon>
-            </span>
+  <el-upload
+    v-model:file-list="fileList"
+    list-type="picture-card"
+    :before-upload="handleBeforeUpload"
+    :http-request="handleUpload"
+    :on-success="handleSuccess"
+    :on-error="handleError"
+    :on-exceed="handleExceed"
+    :accept="props.accept"
+    :limit="props.limit"
+    multiple
+  >
+    <el-icon><Plus /></el-icon>
+    <template #file="{ file }">
+      <div style="width: 100%">
+        <img class="el-upload-list__item-thumbnail" :src="file.url" />
+        <span class="el-upload-list__item-actions">
+          <!-- 预览 -->
+          <span @click="handlePreviewImage(file.url!)">
+            <el-icon><zoom-in /></el-icon>
           </span>
-        </div>
-      </template>
-    </el-upload>
+          <!-- 删除 -->
+          <span @click="handleRemove(file.url!)">
+            <el-icon><Delete /></el-icon>
+          </span>
+        </span>
+      </div>
+    </template>
+  </el-upload>
 
-    <el-image-viewer
-      v-if="previewVisible"
-      :zoom-rate="1.2"
-      :previewImageIndex="previewImageIndex"
-      :url-list="modelValue"
-      @close="handlePreviewClose"
-    />
-  </div>
+  <el-image-viewer
+    v-if="previewVisible"
+    :zoom-rate="1.2"
+    :initial-index="previewImageIndex"
+    :url-list="modelValue"
+    @close="handlePreviewClose"
+  />
 </template>
 <script setup lang="ts">
 import { UploadRawFile, UploadRequestOptions, UploadUserFile } from "element-plus";
 import FileAPI, { FileInfo } from "@/api/file";
 
-const emit = defineEmits(["update:modelValue"]);
-
 const props = defineProps({
   /**
    * 请求携带的额外参数
    */
-  additionalParams: {
+  data: {
     type: Object,
     default: () => {
       return {};
@@ -60,7 +55,7 @@ const props = defineProps({
   /**
    * 上传文件的参数名
    */
-  fileParamName: {
+  name: {
     type: String,
     default: "file",
   },
@@ -72,7 +67,7 @@ const props = defineProps({
     default: 10,
   },
   /**
-   *
+   * 单个文件的最大允许大小
    */
   maxFileSize: {
     type: Number,
@@ -98,7 +93,7 @@ const modelValue = defineModel("modelValue", {
 
 const fileList = ref<UploadUserFile[]>([]);
 
-// modelValue 监听转换所需的 fileList
+// 监听 modelValue 转换用于显示的 fileList
 watch(
   modelValue,
   (value) => {
@@ -124,14 +119,7 @@ function handleRemove(imageUrl: string) {
 }
 
 /**
- * 上传文件超出限制
- */
-function handleExceed(files: File[], uploadFiles: UploadUserFile[]) {
-  ElMessage.warning("最多只能上传" + props.limit + "张图片");
-}
-
-/**
- * 限制用户上传文件的格式和大小
+ * 上传前校验
  */
 function handleBeforeUpload(file: UploadRawFile) {
   // 校验文件类型：虽然 accept 属性限制了用户在文件选择器中可选的文件类型，但仍需在上传时再次校验文件实际类型，确保符合 accept 的规则
@@ -157,8 +145,8 @@ function handleBeforeUpload(file: UploadRawFile) {
   }
 
   // 限制文件大小
-  if (file.size > props.maxSize * 1024 * 1024) {
-    ElMessage.warning("上传图片不能大于" + props.maxSize + "M");
+  if (file.size > props.maxFileSize * 1024 * 1024) {
+    ElMessage.warning("上传图片不能大于" + props.maxFileSize + "M");
     return false;
   }
   return true;
@@ -172,11 +160,11 @@ function handleUpload(options: UploadRequestOptions) {
     const file = options.file;
 
     const formData = new FormData();
-    formData.append(props.fileParamName, file);
+    formData.append(props.name, file);
 
     // 处理附加参数
-    Object.keys(props.additionalParams).forEach((key) => {
-      formData.append(key, props.additionalParams[key]);
+    Object.keys(props.data).forEach((key) => {
+      formData.append(key, props.data[key]);
     });
 
     FileAPI.upload(formData)
@@ -189,10 +177,15 @@ function handleUpload(options: UploadRequestOptions) {
   });
 }
 
+/**
+ * 上传文件超出限制
+ */
+function handleExceed(files: File[], uploadFiles: UploadUserFile[]) {
+  ElMessage.warning("最多只能上传" + props.limit + "张图片");
+}
+
 /**
  * 上传成功回调
- *
- * @param fileInfo 上传成功后的文件信息
  */
 const handleSuccess = (fileInfo: FileInfo) => {
   ElMessage.success("上传成功");
@@ -222,16 +215,4 @@ const handlePreviewClose = () => {
   previewVisible.value = false;
 };
 </script>
-<style lang="scss" scoped>
-.hide {
-  :deep(.el-upload--picture-card) {
-    display: none;
-  }
-}
-
-.show {
-  :deep(.el-upload--picture-card) {
-    display: flex;
-  }
-}
-</style>
+<style lang="scss" scoped></style>