更新页面

src/components/MyComponents/Upload/index.vue

@@ -8,7 +8,8 @@
       :limit="props.limit"
       :action="actionUrl" 
       :list-type="props.showBtn ? '' : 'picture-card'" 
-      :file-list="fileList" show-file-list
+      :file-list="fileList" 
+      show-file-list
       :on-exceed="handleExceed" 
       :on-success="handlerSuccess" 
       :before-upload="beforeImgUpload">
@@ -52,7 +53,7 @@
 
 <script setup>
 import { COMPONENT_WIDTH } from "@/constant";
-import { ref, defineProps, defineEmits, computed, watch, onMounted } from "vue";
+import { ref, defineProps, defineEmits, computed, watch, onMounted, onUnmounted } from "vue";
 import { ElMessage } from "element-plus";
 import { useStore } from "vuex";
 const props = defineProps({
@@ -79,9 +80,30 @@ const props = defineProps({
   },
   isAll: {
     type: Boolean,
-    default: false //所有类型都可以用这个接口，接口返回的是id
+    default: true //所有类型都可以用这个接口，接口返回的是id
   }
 });
+const emits = defineEmits(["update:modelValue"]);
+const store = useStore();
+const dialogImageUrl = ref("");
+const dialogVisible = ref(false);
+const disabled = ref(false);
+const headers = ref({
+  Authorization: store.getters.token
+});
+const fileList = ref([]);
+
+watch(() => props.modelValue,(val) => {
+  let arr = val ?  (Array.isArray(val) ? val :[val]): [];
+  if(arr.length == 0 ) return fileList.value = [];
+  fileList.value = arr.map((el) => {
+    if (Object.prototype.toString.call(el) === "[object Object]") {
+      return props.isAll ? { url: `/mosty-base/minio/image/download/` + el.id, name: el.name } : { url:el,name:el.name};
+    } else {
+      return { url: `/mosty-base/minio/image/download/` + el };
+    }
+  });
+},{ immediate: true,deep:true });
 
 const actionUrl = computed(() => {
   if (props.isAll) {
@@ -91,8 +113,6 @@ const actionUrl = computed(() => {
   }
 });
 
-const emits = defineEmits(["update:modelValue"]);
-
 //获取后缀
 const getSuffix = (fileName) => {
   let suffix = "";
@@ -134,40 +154,16 @@ const getSuffix = (fileName) => {
   //否则返回other
   return "OTHER";
 };
-const store = useStore();
-const dialogImageUrl = ref("");
-const dialogVisible = ref(false);
-const disabled = ref(false);
-const headers = ref({
-  Authorization: store.getters.token
-});
-
-const fileList = ref([]);
-watch(() => props.modelValue,(val) => {
-    let arr = val ?  (Array.isArray(val) ? val :[val]): [];
-    if (arr.length > 0) {
-      fileList.value = arr.map((el) => {
-        if (Object.prototype.toString.call(el) === "[object Object]") {
-          return props.isAll ? { url: `/mosty-base/minio/image/download/` + el.id, name: el.name } : { url:el,name:el.name};
-        } else {
-          return { url: `/mosty-base/minio/image/download/` + el };
-        }
-      });
-    }else{
-      fileList.value = [];
-    }
-  },
-  { immediate: true }
-);
 
 const handlerSuccess = (res, file) => {
-  file.url = `/mosty-base/minio/image/download/` + res.data;
+  // file.url = `/mosty-base/minio/image/download/` + res.data;
+  file.id = res.data;
   fileList.value.push(file);
-  let arr = props.modelValue ? props.modelValue : [];
+  let arr = []
   if(props.isImg){
-    arr.push(res.data);
+    arr = fileList.value.map((el) => el.id)
   }else{
-    arr.push({url:res.data,name:file.name});
+    arr = fileList.value.map((el) => ({ id:el.id, name:el.name}))
   }
   emits("update:modelValue", arr);
 };
@@ -179,16 +175,10 @@ const handleExceed = (files, fileList) => {
 const beforeImgUpload = (file) => {
   if (props.isImg) {
     let isIMG = false;
-    if (getSuffix(file.name) === "IMG") {
-      isIMG = true;
-    }
+    if (getSuffix(file.name) === "IMG")  isIMG = true;
     const isLt5M = file.size / 1024 / 1024 < 5;
-    if (!isIMG) {
-      ElMessage.error("上传图片只能是jpg/png/jpeg/bmp/gif格式!");
-    }
-    if (!isLt5M) {
-      ElMessage.error("上传图片大小不能超过 5MB!");
-    }
+    if (!isIMG) ElMessage.error("上传图片只能是jpg/png/jpeg/bmp/gif格式!");
+    if (!isLt5M) ElMessage.error("上传图片大小不能超过 5MB!");
     return isIMG && isLt5M;
   } else {
     return true;
@@ -204,13 +194,13 @@ const handleDownload = (file) => {
 };
 const handleRemove = (file) => {
   let index = fileList.value.findIndex(function (item) {
-    return item.url === file.url;
+    return item.id === file.id;
   });
   fileList.value.splice(index, 1);
   props.modelValue.splice(index, 1);
-  emits("handleChange", props.modelValue);
   emits("update:modelValue", props.modelValue);
 };
+
 </script>
 
 <style lang="scss" scoped>