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

src/api/file/index.ts

@@ -1,19 +1,12 @@
 import request from "@/utils/request";
 
 const FileAPI = {
-  /**
-   * 文件上传地址
-   */
-  uploadUrl: import.meta.env.VITE_APP_BASE_API + "/api/v1/files",
-
   /**
    * 上传文件
    *
-   * @param file
+   * @param formData
    */
-  upload(file: File) {
+  upload(formData: FormData) {
-    const formData = new FormData();
-    formData.append("file", file);
     return request<any, FileInfo>({
       url: "/api/v1/files",
       method: "post",
@@ -29,7 +22,7 @@ const FileAPI = {
    *
    * @param filePath 文件完整路径
    */
-  deleteByPath(filePath?: string) {
+  delete(filePath?: string) {
     return request({
       url: "/api/v1/files",
       method: "delete",
@@ -42,7 +35,7 @@ const FileAPI = {
    * @param url
    * @param fileName
    */
-  downloadFile(url: string, fileName?: string) {
+  download(url: string, fileName?: string) {
     return request({
       url: url,
       method: "get",

src/components/Upload/FileUpload.vue

@@ -3,53 +3,41 @@
   <div>
     <el-upload
       v-model:file-list="fileList"
-      :class="props.showUploadBtn ? 'show-upload-btn' : 'hide-upload-btn'"
       :style="props.style"
-      multiple
-      :headers="props.headers"
-      :data="props.data"
-      :name="props.name"
       :before-upload="handleBeforeUpload"
-      :on-remove="handleRemove"
+      :http-request="handleUpload"
       :on-progress="handleProgress"
-      :on-success="handleSuccessFile"
+      :on-success="handleSuccess"
       :on-error="handleError"
-      :action="props.action"
       :accept="props.accept"
       :limit="props.limit"
+      multiple
     >
-      <el-button
+      <!-- 上传文件按钮 -->
-        v-if="props.showUploadBtn"
+      <el-button type="primary" :disabled="fileList.length >= props.limit">
-        type="primary"
-        :disabled="fileList.length >= props.limit"
-      >
         {{ props.uploadBtnText }}
       </el-button>
-      <template v-if="props.showTip" #tip>
+
-        <div class="el-upload__tip">
+      <!-- 文件列表 -->
-          {{ props.tip }}
-        </div>
-      </template>
       <template #file="{ file }">
         <div class="el-upload-list__item-info">
-          <a class="el-upload-list__item-name" @click="downloadFile(file)">
+          <a class="el-upload-list__item-name" @click="handleDownload(file)">
             <el-icon><Document /></el-icon>
             <span class="el-upload-list__item-file-name">{{ file.name }}</span>
-            <span v-if="props.showDelBtn" class="el-icon--close" @click.stop="handleRemove(file)">
+            <span class="el-icon--close" @click="handleRemove(file.url!)">
               <el-icon><Close /></el-icon>
             </span>
           </a>
         </div>
       </template>
     </el-upload>
+
     <el-progress
-      v-if="showUploadPercent"
       :style="{
-        display: showUploadPercent ? 'inline-flex' : 'none',
+        display: showProgress ? 'inline-flex' : 'none',
         width: '100%',
       }"
-      :percentage="uploadPercent"
+      :percentage="progressPercent"
-      :color="customColorMethod"
     />
   </div>
 </template>
@@ -57,98 +45,13 @@
 import {
   UploadRawFile,
   UploadUserFile,
-  UploadFile,
   UploadProgressEvent,
-  UploadFiles,
+  UploadRequestOptions,
 } from "element-plus";
 
-import FileAPI from "@/api/file";
+import FileAPI, { FileInfo } from "@/api/file";
-import { getToken } from "@/utils/auth";
-import { ResultEnum } from "@/enums/ResultEnum";
 
-const emit = defineEmits(["update:modelValue"]);
 const props = defineProps({
-  /**
-   * 文件集合
-   */
-  modelValue: {
-    type: Array<UploadUserFile>,
-    default: () => [],
-  },
-  /**
-   * 上传地址
-   */
-  action: {
-    type: String,
-    default: FileAPI.uploadUrl,
-  },
-  /**
-   * 文件上传数量限制
-   */
-  limit: {
-    type: Number,
-    default: 10,
-  },
-  /**
-   * 是否显示删除按钮
-   */
-  showDelBtn: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * 是否显示上传按钮
-   */
-  showUploadBtn: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * 单个文件上传大小限制(单位MB)
-   */
-  maxSize: {
-    type: Number,
-    default: 10,
-  },
-  /**
-   * 上传文件类型
-   */
-  accept: {
-    type: String,
-    default: "*",
-  },
-  /**
-   * 上传按钮文本
-   */
-  uploadBtnText: {
-    type: String,
-    default: "上传文件",
-  },
-  /**
-   * 是否展示提示信息
-   */
-  showTip: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * 提示信息内容
-   */
-  tip: {
-    type: String,
-    default: "",
-  },
-  /**
-   * 请求头
-   */
-  headers: {
-    type: Object,
-    default: () => {
-      return {
-        Authorization: getToken(),
-      };
-    },
-  },
   /**
    * 请求携带的额外参数
    */
@@ -165,6 +68,35 @@ const props = defineProps({
     type: String,
     default: "file",
   },
+  /**
+   * 文件上传数量限制
+   */
+  limit: {
+    type: Number,
+    default: 10,
+  },
+  /**
+   * 单个文件上传大小限制(单位MB)
+   */
+  maxFileSize: {
+    type: Number,
+    default: 10,
+  },
+  /**
+   * 上传文件类型
+   */
+  accept: {
+    type: String,
+    default: "*",
+  },
+  /**
+   * 上传按钮文本
+   */
+  uploadBtnText: {
+    type: String,
+    default: "上传文件",
+  },
+
   /**
    * 样式
    */
@@ -178,119 +110,108 @@ const props = defineProps({
   },
 });
 
+const modelValue = defineModel("modelValue", {
+  type: [Array] as PropType<string[]>,
+  required: true,
+  default: () => [],
+});
+
 const fileList = ref([] as UploadUserFile[]);
-const valFileList = ref([] as UploadUserFile[]);
-const showUploadPercent = ref(false);
-const uploadPercent = ref(0);
 
+const showProgress = ref(false);
+const progressPercent = ref(0);
+
+// 监听 modelValue 转换用于显示的 fileList
 watch(
-  () => props.modelValue,
+  modelValue,
-  (newVal: UploadUserFile[]) => {
+  (value) => {
-    const filePaths = fileList.value.map((file) => file.url);
+    fileList.value = value.map((url) => {
-    const fileNames = fileList.value.map((file) => file.name);
+      const name = url.substring(url.lastIndexOf("/") + 1);
-    // 监听modelValue文件集合值未变化时，跳过赋值
+      return {
-    if (
+        name: name,
-      filePaths.length > 0 &&
+        url: url,
-      filePaths.length === newVal.length &&
+      } as UploadUserFile;
-      filePaths.every((x) => newVal.some((y) => y.url === x)) &&
-      newVal.every((y) => filePaths.some((x) => x === y.url)) &&
-      fileNames.every((x) => newVal.some((y) => y.name === x)) &&
-      newVal.every((y) => fileNames.some((x) => x === y.name))
-    ) {
-      return;
-    }
-
-    if (newVal.length <= 0) {
-      fileList.value = [];
-      valFileList.value = [];
-      return;
-    }
-
-    fileList.value = newVal.map((file) => {
-      return { name: file.name, url: file.url } as UploadFile;
-    });
-
-    valFileList.value = newVal.map((file) => {
-      return { name: file.name, url: file.url } as UploadFile;
     });
   },
-  { immediate: true }
+  {
+    immediate: true,
+  }
 );
 
 /**
- * 限制用户上传文件的大小
+ * 上传前校验
  */
 function handleBeforeUpload(file: UploadRawFile) {
-  if (file.size > props.maxSize * 1024 * 1024) {
+  // 限制文件大小
-    ElMessage.warning("上传文件不能大于" + props.maxSize + "Mb");
+  if (file.size > props.maxFileSize * 1024 * 1024) {
+    ElMessage.warning("上传图片不能大于" + props.maxFileSize + "M");
     return false;
   }
-  uploadPercent.value = 0;
-  showUploadPercent.value = true;
   return true;
 }
-/**
+
- * 上传成功回调方法
+/*
- * @param response 响应题
+ * 上传文件
- * @param file 上传文件
  */
-const handleSuccessFile = (response: any, file: UploadFile) => {
+function handleUpload(options: UploadRequestOptions) {
-  showUploadPercent.value = false;
+  return new Promise((resolve, reject) => {
-  uploadPercent.value = 0;
+    const file = options.file;
-  if (response.code === ResultEnum.SUCCESS) {
+
-    ElMessage.success("上传成功");
+    const formData = new FormData();
-    valFileList.value.push({
+    formData.append(props.name, file);
-      name: file.name,
+
-      url: response.data.url,
+    // 处理附加参数
+    Object.keys(props.data).forEach((key) => {
+      formData.append(key, props.data[key]);
     });
-    emit("update:modelValue", valFileList.value);
+
-    return;
+    FileAPI.upload(formData)
-  } else {
+      .then((data) => {
-    ElMessage.error(response.msg || "上传失败");
+        resolve(data);
-  }
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+}
+
+/**
+ * 上传进度
+ *
+ * @param event
+ */
+const handleProgress = (event: UploadProgressEvent) => {
+  progressPercent.value = event.percent;
+};
+
+/**
+ * 上传成功
+ */
+const handleSuccess = (fileInfo: FileInfo) => {
+  ElMessage.success("上传成功");
+  modelValue.value = [...modelValue.value, fileInfo.url];
 };
 
 const handleError = (error: any) => {
-  showUploadPercent.value = false;
-  uploadPercent.value = 0;
   ElMessage.error("上传失败");
 };
 
-const customColorMethod = (percentage: number) => {
-  if (percentage < 30) {
-    return "#909399";
-  }
-  if (percentage < 70) {
-    return "#375ee8";
-  }
-  return "#67c23a";
-};
-
-const handleProgress = (event: UploadProgressEvent) => {
-  uploadPercent.value = event.percent;
-};
-
 /**
  * 删除文件
  */
-function handleRemove(removeFile: UploadUserFile) {
+function handleRemove(fileUrl: string) {
-  const filePath = removeFile.url;
+  FileAPI.delete(fileUrl).then(() => {
-  if (filePath) {
+    modelValue.value = modelValue.value.filter((url) => url !== fileUrl);
-    FileAPI.deleteByPath(filePath).then(() => {
+  });
-      // 删除成功回调
-      valFileList.value = valFileList.value.filter((file) => file.url !== filePath);
-      emit("update:modelValue", valFileList.value);
-    });
-  }
 }
 
 /**
  * 下载文件
  */
-function downloadFile(file: UploadUserFile) {
+function handleDownload(file: UploadUserFile) {
-  const filePath = file.url;
+  const { url, name } = file;
-  if (filePath) {
+  if (url) {
-    FileAPI.downloadFile(filePath, file.name);
+    FileAPI.download(url, name);
   }
 }
 </script>
@@ -313,16 +234,4 @@ function downloadFile(file: UploadUserFile) {
 :deep(.el-upload-list__item) {
   margin: 0;
 }
-
-.show-upload-btn {
-  :deep(.el-upload) {
-    display: inline-flex;
-  }
-}
-
-.hide-upload-btn {
-  :deep(.el-upload) {
-    display: none;
-  }
-}
 </style>

src/components/Upload/ImageUpload.vue

@@ -1,344 +0,0 @@
-<!-- 图片上传组件 -->
-<template>
-  <!-- 实际的上传组件（隐藏） -->
-  <div style="display: none">
-    <el-upload
-      ref="uploadRef"
-      :file-list="fileList"
-      :http-request="handleUpload"
-      :before-upload="handleBeforeUpload"
-      :on-success="handleSuccess"
-      :on-error="handleError"
-      :data="props.additionalParams"
-      :name="props.fileParamName"
-      :accept="props.accept"
-      :limit="props.limit"
-    />
-  </div>
-
-  <!-- 自定义的显示区域 -->
-  <div class="custom-upload-list">
-    <!-- 已上传的图片列表 -->
-    <div v-for="(path, index) in uploadedImageUrls" :key="index" class="custom-upload-item">
-      <img class="upload-thumbnail" :src="path" alt="" />
-      <div class="upload-actions">
-        <span class="action-item preview" @click="previewImg(path)">
-          <el-icon><zoom-in /></el-icon>
-        </span>
-        <span v-if="props.showDelBtn" class="action-item delete" @click="handleRemove(path)">
-          <el-icon><Delete /></el-icon>
-        </span>
-      </div>
-    </div>
-
-    <!-- 上传按钮 -->
-    <div
-      v-if="uploadedImageUrls.length < props.limit && props.showUploadBtn"
-      class="custom-upload-trigger"
-      @click="triggerUpload"
-    >
-      <el-icon><Plus /></el-icon>
-    </div>
-  </div>
-
-  <!-- 图片预览组件 -->
-  <el-image-viewer
-    v-if="previewVisible"
-    :zoom-rate="1.2"
-    :initialIndex="previewImageIndex"
-    :url-list="uploadedImageUrls"
-    @close="closePreview"
-  />
-</template>
-<script setup lang="ts">
-import { UploadRawFile, UploadUserFile, UploadRequestOptions } from "element-plus";
-import FileAPI, { FileInfo } from "@/api/file";
-
-const emit = defineEmits(["update:modelValue"]);
-
-const props = defineProps({
-  /**
-   * 附加的参数
-   */
-  additionalParams: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  /**
-   * 上传文件的参数名
-   */
-  fileParamName: {
-    type: String,
-    default: "file",
-  },
-  /**
-   * 文件上传数量限制
-   */
-  limit: {
-    type: Number,
-    default: 1,
-  },
-  /**
-   * 是否显示删除按钮
-   */
-  showDelBtn: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * 是否显示上传按钮
-   */
-  showUploadBtn: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * 单张图片最大大小,单位MB
-   */
-  maxSize: {
-    type: Number,
-    default: 10,
-  },
-  /**
-   * 上传文件类型
-   */
-  accept: {
-    type: String,
-    default: "image/*",
-  },
-
-  /**
-   * 自定义样式
-   */
-  style: {
-    type: Object,
-    default: () => {
-      return {
-        width: "130px",
-        height: "130px",
-      };
-    },
-  },
-  /**
-   * 是否多图上传
-   */
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-// 定义v-model
-const modelValue = defineModel("modelValue", {
-  type: [String, Array] as PropType<string | string[]>,
-  required: true,
-  default: () => "",
-});
-
-const previewVisible = ref(false); // 是否显示预览
-const previewImageIndex = ref(0); // 预览的图片索引
-
-const fileList = ref<UploadUserFile[]>([]); // 默认上传文件
-const uploadedImageUrls = ref<string[]>([]); // 已上传的图片
-
-// 添加一个ref来引用el-upload组件
-const uploadRef = ref();
-
-watch(
-  () => modelValue.value,
-  (newValue) => {
-    if (Array.isArray(newValue)) {
-      fileList.value = newValue.map((filePath) => {
-        return { url: filePath } as UploadUserFile;
-      });
-    } else {
-      fileList.value = [];
-      uploadedImageUrls.value = [];
-    }
-  },
-  { immediate: true }
-);
-
-/**
- * 删除图片
- */
-function handleRemove(path: string) {
-  if (path) {
-    FileAPI.deleteByPath(path).then(() => {
-      if (Array.isArray(modelValue.value)) {
-        modelValue.value = modelValue.value.filter((x) => x !== path);
-      } else {
-        modelValue.value = "";
-      }
-    });
-  }
-}
-
-/**
- * 限制用户上传文件的格式和大小
- */
-function handleBeforeUpload(file: UploadRawFile) {
-  // 限制文件大小
-  if (file.size > props.maxSize * 1024 * 1024) {
-    ElMessage.warning("上传图片不能大于" + props.maxSize + "M");
-    return false;
-  }
-  return true;
-}
-
-/*
- * 上传文件
- */
-function handleUpload(options: UploadRequestOptions) {
-  return new Promise((resolve, reject) => {
-    const { file, onSuccess, onError } = options;
-
-    const formData = new FormData();
-    formData.append(props.fileParamName, file);
-
-    // 处理附加参数
-    Object.keys(props.additionalParams).forEach((key) => {
-      formData.append(key, props.additionalParams[key]);
-    });
-
-    FileAPI.upload(formData)
-      .then((data) => {
-        onSuccess(data);
-        resolve(data);
-      })
-      .catch((error) => {
-        onError(error);
-        reject(error);
-      });
-  });
-}
-
-/**
- * 上传成功回调
- *
- * @param fileInfo 上传成功后的文件信息
- */
-const handleSuccess = (fileInfo: FileInfo) => {
-  ElMessage.success("上传成功");
-  const { url } = fileInfo;
-  uploadedImageUrls.value.push(url);
-  if (props.multiple && Array.isArray(modelValue.value)) {
-    modelValue.value.push(url);
-  } else {
-    modelValue.value = url;
-  }
-  return;
-};
-
-/**
- * 上传失败回调
- *
- * @param error 上传失败的错误信息
- */
-const handleError = (error: any) => {
-  ElMessage.error("上传失败");
-};
-
-/**
- * 预览图片
- */
-const previewImg = (path: string) => {
-  previewImageUrls.value = fileList.value.map((file) => file.url!);
-  initialIndex.value = fileList.value.findIndex((file) => file.url === path);
-  previewVisible.value = true;
-};
-
-/**
- * 关闭预览
- */
-const closePreview = () => {
-  previewVisible.value = false;
-};
-
-// 修改triggerUpload方法
-const triggerUpload = () => {
-  // 通过ref直接访问el-upload组件内的input元素
-  const uploadEl = uploadRef.value.$el.querySelector(".el-upload__input");
-  if (uploadEl) {
-    uploadEl.click();
-  }
-};
-</script>
-<style lang="scss" scoped>
-.custom-upload-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.custom-upload-item {
-  position: relative;
-  width: v-bind("props.style.width");
-  height: v-bind("props.style.height");
-  overflow: hidden;
-  border-radius: 6px;
-
-  .upload-thumbnail {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .upload-actions {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0 0 0 / 50%);
-    opacity: 0;
-    transition: opacity 0.3s;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    .action-item {
-      padding: 8px;
-      color: #fff;
-      cursor: pointer;
-
-      &:hover {
-        color: var(--el-color-primary);
-      }
-    }
-  }
-}
-
-.custom-upload-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: v-bind("props.style.width");
-  height: v-bind("props.style.height");
-  cursor: pointer;
-  background-color: rgb(255 254 254 / 50%);
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  transition: var(--el-transition-duration);
-
-  &:hover {
-    color: var(--el-color-primary);
-    border-color: var(--el-color-primary);
-  }
-
-  .el-icon {
-    font-size: 20px;
-    color: #999;
-  }
-
-  &:hover .el-icon {
-    color: var(--el-color-primary);
-  }
-}
-</style>

src/components/Upload/MultiImageUpload.vue

@@ -1,57 +1,52 @@
 <!-- 图片上传组件 -->
 <template>
-  <div>
+  <el-upload
-    <el-upload
+    v-model:file-list="fileList"
-      v-model:file-list="fileList"
+    list-type="picture-card"
-      list-type="picture-card"
+    :before-upload="handleBeforeUpload"
-      :before-upload="handleBeforeUpload"
+    :http-request="handleUpload"
-      :http-request="handleUpload"
+    :on-success="handleSuccess"
-      :data="props.additionalParams"
+    :on-error="handleError"
-      :name="props.fileParamName"
+    :on-exceed="handleExceed"
-      :on-success="handleSuccess"
+    :accept="props.accept"
-      :on-error="handleError"
+    :limit="props.limit"
-      :on-exceed="handleExceed"
+    multiple
-      :accept="props.accept"
+  >
-      :limit="props.limit"
+    <el-icon><Plus /></el-icon>
-    >
+    <template #file="{ file }">
-      <el-icon><Plus /></el-icon>
+      <div style="width: 100%">
-      <template #file="{ file }">
+        <img class="el-upload-list__item-thumbnail" :src="file.url" />
-        <div style="width: 100%">
+        <span class="el-upload-list__item-actions">
-          <image 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 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>
           </span>
-        </div>
+          <!-- 删除 -->
-      </template>
+          <span @click="handleRemove(file.url!)">
-    </el-upload>
+            <el-icon><Delete /></el-icon>
+          </span>
+        </span>
+      </div>
+    </template>
+  </el-upload>
 
-    <el-image-viewer
+  <el-image-viewer
-      v-if="previewVisible"
+    v-if="previewVisible"
-      :zoom-rate="1.2"
+    :zoom-rate="1.2"
-      :previewImageIndex="previewImageIndex"
+    :initial-index="previewImageIndex"
-      :url-list="modelValue"
+    :url-list="modelValue"
-      @close="handlePreviewClose"
+    @close="handlePreviewClose"
-    />
+  />
-  </div>
 </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) {
+  if (file.size > props.maxFileSize * 1024 * 1024) {
-    ElMessage.warning("上传图片不能大于" + props.maxSize + "M");
+    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) => {
+    Object.keys(props.data).forEach((key) => {
-      formData.append(key, props.additionalParams[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>
+<style lang="scss" scoped></style>
-.hide {
-  :deep(.el-upload--picture-card) {
-    display: none;
-  }
-}
-
-.show {
-  :deep(.el-upload--picture-card) {
-    display: flex;
-  }
-}
-</style>

src/components/Upload/SingleImageUpload.vue

@@ -0,0 +1,202 @@
+<!-- 单图上传组件 -->
+<template>
+  <el-upload
+    v-model="modelValue"
+    class="single-upload"
+    list-type="picture-card"
+    :accept="props.accept"
+    :before-upload="handleBeforeUpload"
+    :http-request="handleUpload"
+    :on-success="onSuccess"
+    :on-error="onError"
+    multiple
+  >
+    <template #default>
+      <el-image v-if="modelValue" :src="modelValue" />
+      <el-icon v-if="modelValue" class="single-upload__delete-btn" @click.stop="handleDelete">
+        <CircleCloseFilled />
+      </el-icon>
+      <el-icon v-else class="single-upload__add-btn">
+        <Plus />
+      </el-icon>
+    </template>
+  </el-upload>
+</template>
+
+<script setup lang="ts">
+import { ElImageViewer, UploadRawFile, UploadRequestOptions } from "element-plus";
+import FileAPI, { FileInfo } from "@/api/file";
+
+const props = defineProps({
+  /**
+   * 请求携带的额外参数
+   */
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  /**
+   * 上传文件的参数名
+   */
+  name: {
+    type: String,
+    default: "file",
+  },
+  /**
+   * 文件大小允许最大（单位：MB）
+   */
+  maxFileSize: {
+    type: Number,
+    default: 10,
+  },
+
+  /**
+   * 接收文件类型
+   */
+  accept: {
+    type: String,
+    default: "image/*", //  默认支持所有图片格式 ，如果需要指定格式，格式如下：'.png,.jpg,.jpeg,.gif,.bmp'
+  },
+
+  /**
+   * 自定义样式
+   */
+  style: {
+    type: Object,
+    default: () => {
+      return {
+        width: "130px",
+        height: "130px",
+      };
+    },
+  },
+});
+
+const modelValue = defineModel("modelValue", {
+  type: String,
+  required: true,
+  default: () => "",
+});
+
+/**
+ * 限制用户上传文件的格式和大小
+ */
+function handleBeforeUpload(file: UploadRawFile) {
+  // 校验文件类型：虽然 accept 属性限制了用户在文件选择器中可选的文件类型，但仍需在上传时再次校验文件实际类型，确保符合 accept 的规则
+  const acceptTypes = props.accept.split(",").map((type) => type.trim());
+
+  // 检查文件格式是否符合 accept
+  const isValidType = acceptTypes.some((type) => {
+    if (type === "image/*") {
+      // 如果是 image/*，检查 MIME 类型是否以 "image/" 开头
+      return file.type.startsWith("image/");
+    } else if (type.startsWith(".")) {
+      // 如果是扩展名 (.png, .jpg)，检查文件名是否以指定扩展名结尾
+      return file.name.toLowerCase().endsWith(type);
+    } else {
+      // 如果是具体的 MIME 类型 (image/png, image/jpeg)，检查是否完全匹配
+      return file.type === type;
+    }
+  });
+
+  if (!isValidType) {
+    ElMessage.warning(`上传文件的格式不正确，仅支持：${props.accept}`);
+    return false;
+  }
+
+  // 限制文件大小
+  if (file.size > props.maxFileSize * 1024 * 1024) {
+    ElMessage.warning("上传图片不能大于" + props.maxFileSize + "M");
+    return false;
+  }
+  return true;
+}
+
+/*
+ * 上传图片
+ */
+function handleUpload(options: UploadRequestOptions) {
+  return new Promise((resolve, reject) => {
+    const file = options.file;
+
+    const formData = new FormData();
+    formData.append(props.name, file);
+
+    // 处理附加参数
+    Object.keys(props.data).forEach((key) => {
+      formData.append(key, props.data[key]);
+    });
+
+    FileAPI.upload(formData)
+      .then((data) => {
+        resolve(data);
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+}
+
+/**
+ * 删除图片
+ */
+function handleDelete() {
+  modelValue.value = "";
+}
+
+/**
+ * 上传成功回调
+ *
+ * @param fileInfo 上传成功后的文件信息
+ */
+const onSuccess = (fileInfo: FileInfo) => {
+  ElMessage.success("上传成功");
+  modelValue.value = fileInfo.url;
+};
+
+/**
+ * 上传失败回调
+ */
+const onError = (error: any) => {
+  console.log("onError");
+  ElMessage.error("上传失败: " + error.message);
+};
+</script>
+
+<style scoped lang="scss">
+:deep(.el-upload--picture-card) {
+  /*  width: var(--el-upload-picture-card-size);
+  height: var(--el-upload-picture-card-size); */
+  width: v-bind("props.style.width");
+  height: v-bind("props.style.height");
+}
+
+.single-upload {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px var(--el-border-color) solid;
+  border-radius: 5px;
+
+  &:hover {
+    border-color: var(--el-color-primary);
+  }
+
+  &__delete-btn {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    font-size: 16px;
+    color: #ff7901;
+    cursor: pointer;
+    background: #fff;
+    border-radius: 100%;
+
+    :hover {
+      color: #ff4500;
+    }
+  }
+}
+</style>

src/types/components.d.ts

@@ -84,12 +84,12 @@ declare module "vue" {
     SidebarMenuItem: (typeof import("./../layout/components/Sidebar/components/SidebarMenuItem.vue"))["default"];
     SidebarMenuItemTitle: (typeof import("./../layout/components/Sidebar/components/SidebarMenuItemTitle.vue"))["default"];
     SidebarMixTopMenu: (typeof import("./../layout/components/Sidebar/components/SidebarMixTopMenu.vue"))["default"];
+    SingleImageUpload: (typeof import("./../components/Upload/SingleImageUpload.vue"))["default"];
     SizeSelect: (typeof import("./../components/SizeSelect/index.vue"))["default"];
     SvgIcon: (typeof import("./../components/SvgIcon/index.vue"))["default"];
     TableSelect: (typeof import("./../components/TableSelect/index.vue"))["default"];
     TagsView: (typeof import("./../layout/components/TagsView/index.vue"))["default"];
     ThemeColorPicker: (typeof import("./../layout/components/Settings/components/ThemeColorPicker.vue"))["default"];
-    SingleImageUpload: (typeof import("./../components/Upload/SingleImageUpload.vue"))["default"];
     WangEditor: (typeof import("./../components/WangEditor/index.vue"))["default"];
   }
   export interface ComponentCustomProperties {

src/views/demo/upload.vue

@@ -15,7 +15,8 @@
         {{ picUrl }}
       </el-form-item>
       <el-form-item label="图片上传">
-        <ImageUpload v-model="picUrl" :maxSize="10" />
+        <MultiImageUpload v-model="picUrls" :maxFileSize="10" :limit="3" accept=".png" />
+        <SingleImageUpload v-model="picUrl" accept=".png" style="width: 120px; height: 120px" />
       </el-form-item>
       <el-form-item label="参数说明">
         <el-table :data="imageUploadArgData" border>
@@ -42,8 +43,11 @@
 </template>
 
 <script setup lang="ts">
+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 = [
   {
@@ -127,14 +131,8 @@ const imageUploadArgData = [
 ];
 
 const fileUrls = ref([
-  {
+  "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
-    name: "file one.jpg",
+  "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
-    url: "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
-  },
-  {
-    name: "file two.jpg",
-    url: "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
-  },
 ]);
 
 const fileUploadArgData = [