bugfix and performance improves

src/components/ImageUpload/index.vue

@@ -1,23 +1,25 @@
 <template>
   <div class="component-upload-image">
     <el-upload
-      multiple
-      :action="uploadImgUrl"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      name="file"
-      :on-remove="handleRemove"
-      :show-file-list="true"
-      :headers="headers"
-      :file-list="fileList"
-      :on-preview="handlePictureCardPreview"
-      :class="{ hide: fileList.length >= limit }"
+        multiple
+        :action="uploadImgUrl"
+        list-type="picture-card"
+        :on-success="handleUploadSuccess"
+        :before-upload="handleBeforeUpload"
+        :limit="limit"
+        :on-error="handleUploadError"
+        :on-exceed="handleExceed"
+        name="file"
+        :on-remove="handleRemove"
+        :show-file-list="true"
+        :headers="headers"
+        :file-list="fileList"
+        :on-preview="handlePictureCardPreview"
+        :class="{ hide: fileList.length >= limit }"
     >
-      <el-icon class="avatar-uploader-icon"><plus /></el-icon>
+      <el-icon class="avatar-uploader-icon">
+        <plus/>
+      </el-icon>
     </el-upload>
     <!-- 上传提示 -->
     <div class="el-upload__tip" v-if="showTip">
@@ -32,21 +34,21 @@
     </div>
 
     <el-dialog
-      v-model="dialogVisible"
-      title="预览"
-      width="800px"
-      append-to-body
+        v-model="dialogVisible"
+        title="预览"
+        width="800px"
+        append-to-body
     >
       <img
-        :src="dialogImageUrl"
-        style="display: block; max-width: 100%; margin: 0 auto"
+          :src="dialogImageUrl"
+          style="display: block; max-width: 100%; margin: 0 auto"
       />
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { getToken } from "@/utils/auth";
+import {getToken} from "@/utils/auth";
 
 const props = defineProps({
   modelValue: [String, Object, Array],
@@ -76,7 +78,7 @@ const props = defineProps({
   },
 });
 
-const { proxy } = getCurrentInstance();
+const {proxy} = getCurrentInstance();
 const emit = defineEmits();
 const number = ref(0);
 const uploadList = ref([]);
@@ -84,35 +86,35 @@ const dialogImageUrl = ref("");
 const dialogVisible = ref(false);
 const baseUrl = import.meta.env.VITE_APP_BASE_API;
 const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
-const headers = ref({ Authorization: "Bearer " + getToken() });
+const headers = ref({Authorization: "Bearer " + getToken()});
 const fileList = ref([]);
 const showTip = computed(
-  () => props.isShowTip && (props.fileType || props.fileSize)
+    () => props.isShowTip && (props.fileType || props.fileSize)
 );
 
 watch(
-  () => props.modelValue,
-  (val) => {
-    if (val) {
-      // 首先将值转为数组
-      const list = Array.isArray(val) ? val : props.modelValue.split(",");
-      // 然后将数组转为对象数组
-      fileList.value = list.map((item) => {
-        if (typeof item === "string") {
-          if (item.indexOf(baseUrl) === -1) {
-            item = { name: baseUrl + item, url: baseUrl + item };
-          } else {
-            item = { name: item, url: item };
+    () => props.modelValue,
+    (val) => {
+      if (val) {
+        // 首先将值转为数组
+        const list = Array.isArray(val) ? val : props.modelValue.split(",");
+        // 然后将数组转为对象数组
+        fileList.value = list.map((item) => {
+          if (typeof item === "string") {
+            if (item.indexOf(baseUrl) === -1) {
+              item = {name: baseUrl + "/file" + item, url: baseUrl + "/file" + item};
+            } else {
+              item = {name: item, url: item};
+            }
           }
-        }
-        return item;
-      });
-    } else {
-      fileList.value = [];
-      return [];
-    }
-  },
-  { deep: true, immediate: true }
+          return item;
+        });
+      } else {
+        fileList.value = [];
+        return [];
+      }
+    },
+    {deep: true, immediate: true}
 );
 
 // 删除图片
@@ -122,11 +124,11 @@ function handleRemove(file, files) {
 
 // 上传成功回调
 function handleUploadSuccess(res) {
-  uploadList.value.push({ name: res.fileName, url: res.url });
+  uploadList.value.push({name: res.fileName, url: res.fileName});
   if (uploadList.value.length === number.value) {
     fileList.value = fileList.value
-      .filter((f) => f.url !== undefined)
-      .concat(uploadList.value);
+        .filter((f) => f.url !== undefined)
+        .concat(uploadList.value);
     uploadList.value = [];
     number.value = 0;
     emit("update:modelValue", listToString(fileList.value));
@@ -152,7 +154,7 @@ function handleBeforeUpload(file) {
   }
   if (!isImg) {
     proxy.$modal.msgError(
-      `文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!`
+        `文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!`
     );
     return false;
   }