更新

src/components/MyComponents/Upload/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="form-item-box" :class="props.showBtn?'showBtn-upload':''" :style="{ width: width }">
+  <div
+    class="form-item-box"
+    :class="props.showBtn ? 'showBtn-upload' : ''"
+    :style="{ width: width }"
+  >
     <el-upload
       v-bind="$attrs"
       :headers="headers"
@@ -7,23 +11,27 @@
       class="avatar-uploader"
       :limit="props.limit"
       :action="actionUrl"
-      :list-type=" props.showBtn ? '' :'picture-card'"
+      :list-type="props.showBtn ? '' : 'picture-card'"
       :file-list="fileList"
       show-file-list
       :on-exceed="handleExceed"
       :on-success="handlerSuccess"
       :before-upload="beforeImgUpload"
     >
-    
       <template #default>
-        <el-button v-if="props.showBtn" size="small" type="primary">上传文件</el-button>
+        <el-button v-if="props.showBtn" size="small" type="primary"
+          >上传文件</el-button
+        >
         <el-icon v-else> <Plus /> </el-icon>
       </template>
       <template #file="{ file }" v-if="!props.showBtn">
         <div v-if="props.isImg">
           <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="handlePictureCardPreview(file)">
+            <span
+              class="el-upload-list__item-preview"
+              @click="handlePictureCardPreview(file)"
+            >
               <el-icon> <zoom-in /></el-icon>
             </span>
             <span
@@ -75,14 +83,7 @@
 
 <script setup>
 import { COMPONENT_WIDTH } from "@/constant";
-import {
-  ref,
-  defineProps,
-  defineEmits,
-  computed,
-  watch,
-  onMounted
-} from "vue";
+import { ref, defineProps, defineEmits, computed, watch, onMounted } from "vue";
 import { ElMessage } from "element-plus";
 import { useStore } from "vuex";
 const props = defineProps({
@@ -103,9 +104,9 @@ const props = defineProps({
     default: COMPONENT_WIDTH,
     type: String
   },
-  showBtn:{
-    type:Boolean,
-    default:false
+  showBtn: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -174,8 +175,6 @@ const getSuffix = (fileName) => {
   //否则返回other
   return "OTHER";
 };
-
-const imageUrl = ref("");
 const store = useStore();
 const dialogImageUrl = ref("");
 const dialogVisible = ref(false);
@@ -184,23 +183,36 @@ const headers = ref({
   Authorization: store.getters.token
 });
 
-onMounted(() => {
-  if (props.modelValue) {
-    fileList.value = props.modelValue.map((el) => {
-      return {
-        url: `/mosty-api/mosty-base/minio/image/download/` + el
-      };
-    });
-  }
-});
-
 const fileList = ref([]);
+onMounted(() => {
+});
+watch(
+  () => props.modelValue,
+  (val) => {
+    let arr = val ? val : [];
+    if (arr && arr.length > 0) {
+      if (!props.sfUrl) {
+        fileList.value = arr.map((el) => {
+          return { url: `/mosty-api/mosty-base/minio/image/download/` + el };
+        });
+      } else {
+        fileList.value = arr.map((el) => {
+          return { url: el };
+        });
+      }
+    }
+  },
+  { immediate: true }
+);
+
+
 const handlerSuccess = (res, file) => {
   file.url = `/mosty-api/mosty-base/minio/image/download/` + res.data;
   fileList.value.push(file);
-  props.modelValue.push(res.data);
+  let arr = props.modelValue ? props.modelValue : [];
+  arr.push(res.data);
+  emits("update:modelValue", arr);
   emits("handleChange", props.modelValue);
-  emits("update:modelValue", props.modelValue);
 };
 
 const handleExceed = (files, fileList) => {
@@ -225,9 +237,6 @@ const beforeImgUpload = (file) => {
     return true;
   }
 };
-const handleAvatarSuccess = (res, file) => {
-  imageUrl.value = URL.createObjectURL(file.raw);
-};
 //查询图片
 const handlePictureCardPreview = (file) => {
   dialogImageUrl.value = file.url;
@@ -245,6 +254,8 @@ const handleRemove = (file) => {
   emits("handleChange", props.modelValue);
   emits("update:modelValue", props.modelValue);
 };
+const propsModelValue = ref();
+
 </script>
 
 <style lang="scss" scoped>