From 14858b2cf23402adf80f8c101f3ca7dc6f0cac0b Mon Sep 17 00:00:00 2001
From: Theo <971366405@qq.com>
Date: Wed, 24 Jul 2024 23:57:43 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20:hammer:=20=E4=B8=B4=E6=97=B6=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/FileUpload.vue  |  6 ++-
 src/components/Upload/ImageUpload.vue | 76 +++++++++++++++++++--------
 2 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/src/components/Upload/FileUpload.vue b/src/components/Upload/FileUpload.vue
index 61a35e2c..76ab92f5 100644
--- a/src/components/Upload/FileUpload.vue
+++ b/src/components/Upload/FileUpload.vue
@@ -63,6 +63,7 @@ import {
   UploadUserFile,
   UploadFile,
   UploadProgressEvent,
+  UploadFiles,
 } from "element-plus";
 import { TOKEN_KEY } from "@/enums/CacheEnum";
 import FileAPI from "@/api/file";
@@ -224,8 +225,9 @@ watch(
  */
 function handleBeforeUpload(file: UploadRawFile) {
   if (file.size > props.uploadMaxSize) {
-    let mUploadMaxSize = props.uploadMaxSize / 1024 / 1024;
-    ElMessage.warning("上传文件不能大于" + mUploadMaxSize + "M");
+    ElMessage.warning(
+      "上传文件不能大于" + Math.trunc(props.uploadMaxSize / 1024 / 1024) + "M"
+    );
     return false;
   }
   uploadPercent.value = 0;
diff --git a/src/components/Upload/ImageUpload.vue b/src/components/Upload/ImageUpload.vue
index d48a2ddd..d0a6a9cf 100644
--- a/src/components/Upload/ImageUpload.vue
+++ b/src/components/Upload/ImageUpload.vue
@@ -7,8 +7,11 @@
       fileList.length >= props.limit || !props.showUploadBtn ? 'hide' : 'show'
     "
     :before-upload="handleBeforeUpload"
-    :http-request="handleUpload"
-    :on-remove="handleRemove"
+    :action="props.action"
+    :headers="props.headers"
+    :data="props.data"
+    :on-success="handleSuccessFile"
+    :on-error="handleError"
     :accept="props.accept"
     :limit="props.limit"
   >
@@ -49,6 +52,8 @@ import {
   UploadProps,
 } from "element-plus";
 import FileAPI from "@/api/file";
+import { TOKEN_KEY } from "@/enums/CacheEnum";
+import { ResultEnum } from "@/enums/ResultEnum";
 
 const emit = defineEmits(["update:modelValue"]);
 
@@ -60,6 +65,33 @@ const props = defineProps({
     type: Array<string>,
     default: () => [],
   },
+  /**
+   * 上传地址
+   */
+  action: {
+    type: String,
+    default: FileAPI.uploadUrl,
+  },
+  /**
+   * 请求头
+   */
+  headers: {
+    type: Object,
+    default: () => {
+      return {
+        Authorization: localStorage.getItem(TOKEN_KEY),
+      };
+    },
+  },
+  /**
+   * 请求参数
+   */
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
   /**
    * 文件上传数量限制
    */
@@ -101,6 +133,7 @@ const viewVisible = ref(false);
 const initialIndex = ref(0);
 
 const fileList = ref([] as UploadUserFile[]);
+const valFileList = ref([] as string[]);
 const viewFileList = ref([] as string[]);
 
 watch(
@@ -125,32 +158,32 @@ watch(
     fileList.value = newVal.map((filePath) => {
       return { url: filePath } as UploadUserFile;
     });
+    valFileList.value = newVal.map((filePath) => {
+      return filePath;
+    });
   },
   { immediate: true }
 );
 
 /**
- * 自定义图片上传
+ * 上传成功回调
  *
  * @param options
  */
-async function handleUpload(options: UploadRequestOptions): Promise<any> {
-  // 上传API调用
-  const data = await FileAPI.upload(options.file);
+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 || "上传失败");
+  }
+};
 
-  // 上传成功需手动替换文件路径为远程URL，否则图片地址为预览地址 blob:http://
-  const fileIndex = fileList.value.findIndex(
-    (file) => file.uid == (options.file as any).uid
-  );
-  fileList.value.splice(fileIndex, 1, {
-    name: data.name,
-    url: data.url,
-  } as UploadUserFile);
-  emit(
-    "update:modelValue",
-    fileList.value.map((file) => file.url)
-  );
-}
+const handleError = (error: any) => {
+  ElMessage.error("上传失败");
+};
 
 /**
  * 删除图片
@@ -174,8 +207,9 @@ function handleRemove(removeFile: UploadFile) {
  */
 function handleBeforeUpload(file: UploadRawFile) {
   if (file.size > props.uploadMaxSize) {
-    let mUploadMaxSize = props.uploadMaxSize / 1024 / 1024;
-    ElMessage.warning("上传图片不能大于" + mUploadMaxSize + "M");
+    ElMessage.warning(
+      "上传图片不能大于" + Math.trunc(props.uploadMaxSize / 1024 / 1024) + "M"
+    );
     return false;
   }
   return true;