From 0cc300a0328f6c8d914fb392dd6e5400345dc4b4 Mon Sep 17 00:00:00 2001
From: ray <1490493387@qq.com>
Date: Fri, 18 Oct 2024 22:07:27 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20:hammer:=20=E4=B8=8A=E4=BC=A0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=8F=82=E6=95=B0=E7=BB=9F=E4=B8=80=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/FileUpload.vue  |   4 +-
 src/components/Upload/ImageUpload.vue | 254 --------------------------
 2 files changed, 2 insertions(+), 256 deletions(-)
 delete mode 100644 src/components/Upload/ImageUpload.vue

diff --git a/src/components/Upload/FileUpload.vue b/src/components/Upload/FileUpload.vue
index 9b0a54cf..3ecca178 100644
--- a/src/components/Upload/FileUpload.vue
+++ b/src/components/Upload/FileUpload.vue
@@ -108,9 +108,9 @@ const props = defineProps({
     default: true,
   },
   /**
-   * 单个文件上传大小限制(单位byte)
+   * 单个文件上传大小限制(单位MB)
    */
-  uploadMaxSize: {
+  maxSize: {
     type: Number,
     default: 2 * 1024 * 1024,
   },
diff --git a/src/components/Upload/ImageUpload.vue b/src/components/Upload/ImageUpload.vue
deleted file mode 100644
index ddc1861a..00000000
--- a/src/components/Upload/ImageUpload.vue
+++ /dev/null
@@ -1,254 +0,0 @@
-<!-- 图片上传组件 -->
-<template>
-  <el-upload
-    v-model:file-list="fileList"
-    list-type="picture-card"
-    :class="
-      fileList.length >= props.limit || !props.showUploadBtn ? 'hide' : 'show'
-    "
-    :before-upload="handleBeforeUpload"
-    :action="props.action"
-    :headers="props.headers"
-    :data="props.data"
-    :name="props.name"
-    :on-success="handleSuccessFile"
-    :on-error="handleError"
-    :accept="props.accept"
-    :limit="props.limit"
-  >
-    <el-icon><Plus /></el-icon>
-    <template #file="{ file }">
-      <div style="width: 100%">
-        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-        <span class="el-upload-list__item-actions">
-          <span class="el-upload-list__item-preview" @click="previewImg(file)">
-            <el-icon><zoom-in /></el-icon>
-          </span>
-          <span
-            v-if="props.showDelBtn"
-            class="el-upload-list__item-delete"
-            @click="handleRemove(file)"
-          >
-            <el-icon><Delete /></el-icon>
-          </span>
-        </span>
-      </div>
-    </template>
-  </el-upload>
-
-  <el-image-viewer
-    v-if="viewVisible"
-    :zoom-rate="1.2"
-    :initialIndex="initialIndex"
-    :url-list="viewFileList"
-    @close="closePreview"
-  />
-</template>
-<script setup lang="ts">
-import {
-  UploadRawFile,
-  UploadUserFile,
-  UploadFile,
-  UploadProps,
-} from "element-plus";
-import FileAPI from "@/api/file";
-import { getToken } from "@/utils/auth";
-import { ResultEnum } from "@/enums/ResultEnum";
-
-const emit = defineEmits(["update:modelValue"]);
-
-const props = defineProps({
-  /**
-   * 文件路径集合
-   */
-  modelValue: {
-    type: Array<string>,
-    default: () => [],
-  },
-  /**
-   * 上传地址
-   */
-  action: {
-    type: String,
-    default: FileAPI.uploadUrl,
-  },
-  /**
-   * 请求头
-   */
-  headers: {
-    type: Object,
-    default: () => {
-      return {
-        Authorization: getToken(),
-      };
-    },
-  },
-  /**
-   * 请求携带的额外参数
-   */
-  data: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  /**
-   * 上传文件的参数名
-   */
-  name: {
-    type: String,
-    default: "file",
-  },
-  /**
-   * 文件上传数量限制
-   */
-  limit: {
-    type: Number,
-    default: 10,
-  },
-  /**
-   * 是否显示删除按钮
-   */
-  showDelBtn: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * 是否显示上传按钮
-   */
-  showUploadBtn: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * 单张图片最大大小
-   */
-  uploadMaxSize: {
-    type: Number,
-    default: 2 * 1024 * 1024,
-  },
-  /**
-   * 上传文件类型
-   */
-  accept: {
-    type: String,
-    default: "image/*",
-  },
-});
-
-const viewVisible = ref(false);
-const initialIndex = ref(0);
-
-const fileList = ref([] as UploadUserFile[]);
-const valFileList = ref([] as string[]);
-const viewFileList = ref([] as string[]);
-
-watch(
-  () => props.modelValue,
-  (newVal: string[]) => {
-    const filePaths = fileList.value.map((file) => file.url);
-    // 监听modelValue文件集合值未变化时，跳过赋值
-    if (
-      filePaths.length > 0 &&
-      filePaths.length === newVal.length &&
-      filePaths.every((x) => newVal.some((y) => y === x)) &&
-      newVal.every((y) => filePaths.some((x) => x === y))
-    ) {
-      return;
-    }
-
-    if (newVal.length <= 0) {
-      fileList.value = [];
-      viewFileList.value = [];
-      valFileList.value = [];
-      return;
-    }
-
-    fileList.value = newVal.map((filePath) => {
-      return { url: filePath } as UploadUserFile;
-    });
-    valFileList.value = newVal.map((filePath) => {
-      return filePath;
-    });
-  },
-  { immediate: true }
-);
-
-/**
- * 上传成功回调
- *
- * @param options
- */
-const handleSuccessFile = (response: any, file: UploadFile) => {
-  if (response.code === ResultEnum.SUCCESS) {
-    ElMessage.success("上传成功");
-    valFileList.value.push(response.data.url);
-    emit("update:modelValue", valFileList.value);
-    return;
-  } else {
-    ElMessage.error(response.msg || "上传失败");
-  }
-};
-
-const handleError = (error: any) => {
-  ElMessage.error("上传失败");
-};
-
-/**
- * 删除图片
- */
-function handleRemove(removeFile: UploadFile) {
-  const filePath = removeFile.url;
-  if (filePath) {
-    FileAPI.deleteByPath(filePath).then(() => {
-      valFileList.value = valFileList.value.filter((x) => x !== filePath);
-      // 删除成功回调
-      emit("update:modelValue", valFileList.value);
-    });
-  }
-}
-
-/**
- * 限制用户上传文件的格式和大小
- */
-function handleBeforeUpload(file: UploadRawFile) {
-  if (file.size > props.uploadMaxSize) {
-    ElMessage.warning(
-      "上传图片不能大于" + Math.trunc(props.uploadMaxSize / 1024 / 1024) + "M"
-    );
-    return false;
-  }
-  return true;
-}
-
-/**
- * 预览图片
- */
-const previewImg: UploadProps["onPreview"] = (uploadFile: UploadFile) => {
-  viewFileList.value = fileList.value.map((file) => file.url!);
-  initialIndex.value = fileList.value.findIndex(
-    (file) => file.url === uploadFile.url
-  );
-  viewVisible.value = true;
-};
-
-/**
- * 关闭预览
- */
-const closePreview = () => {
-  viewVisible.value = false;
-};
-</script>
-<style lang="scss" scoped>
-.hide {
-  :deep(.el-upload--picture-card) {
-    display: none;
-  }
-}
-
-.show {
-  :deep(.el-upload--picture-card) {
-    display: flex;
-  }
-}
-</style>