1

src/components/FileUploader/index.vue

@@ -26,7 +26,7 @@
     <!-- 文件列表表格 -->
     <el-table
       v-if="!isInline"
-      :data="fileList"
+      :data="safeFileList"
       style="width: 100%"
       empty-text="暂无数据"
       border
@@ -66,21 +66,21 @@
         placement="bottom-start"
         width="420"
         trigger="hover"
-        :disabled="fileList.length === 0 || disabled"
+        :disabled="safeFileList.length === 0 || disabled"
         popper-class="file-popover"
       >
         <!-- 弹窗内容 -->
         <template #default>
           <div class="file-popover-content">
             <!-- 无文件提示 -->
-            <div v-if="fileList.length === 0" class="empty-file-tip">
+            <div v-if="safeFileList.length === 0" class="empty-file-tip">
               暂无上传文件
             </div>
 
             <!-- 文件列表 -->
             <div v-else class="file-list">
               <div
-                v-for="(file, index) in fileList"
+                v-for="(file, index) in safeFileList"
                 :key="file.id || index"
                 class="file-item"
               >
@@ -127,7 +127,7 @@
         <template #reference>
           <div class="inline-file">
             <div class="file-count">
-              <span class="count-num">{{ fileList.length }}</span>
+              <span class="count-num">{{ safeFileList.length }}</span>
               <span class="count-text">个文件</span>
             </div>
             <el-icon class="upload-icon"><ArrowDown /></el-icon>
@@ -144,12 +144,12 @@ import { ElMessageBox, ElMessage } from "element-plus";
 import moment from "moment";
 import windowConfig from "@/window";
 // 引入需要的图标
-import { Document, Download, Delete } from "@element-plus/icons-vue";
+import { Document, Download, Delete, ArrowDown } from "@element-plus/icons-vue"; // 补充缺失的 ArrowDown 图标
 
-// 定义组件 props（设置默认值，无需外部传参）
+// 定义组件 props（放宽类型限制，增加兼容性）
 const props = defineProps({
   modelValue: {
-    type: Array,
+    type: [Array, String, Number], // 兼容更多类型
     default: () => [],
     required: true,
   },
@@ -192,13 +192,15 @@ const emit = defineEmits(["update:modelValue"]);
 const selectedIds = ref([]);
 const popoverVisible = ref(false);
 
-// 计算属性：获取文件列表（双向绑定）
-const fileList = computed({
+// 核心：安全处理文件列表，将非数组值转为空数组
+const safeFileList = computed({
   get() {
-    return props.modelValue;
+    // 校验：如果是数组则直接返回，否则转为空数组
+    return Array.isArray(props.modelValue) ? props.modelValue : [];
   },
   set(value) {
-    emit("update:modelValue", value);
+    // 向外发射的值始终是数组，保证数据类型统一
+    emit("update:modelValue", Array.isArray(value) ? value : []);
   },
 });
 
@@ -210,7 +212,7 @@ const formatDate = (date) => {
 // 文件上传成功处理
 const handleUploadSuccess = (res) => {
   if (res && res.data) {
-    fileList.value = [...fileList.value, res.data];
+    safeFileList.value = [...safeFileList.value, res.data]; // 改用 safeFileList
     console.log("上传成功：", res.data);
     ElMessage.success("文件上传成功");
     popoverVisible.value = false;
@@ -253,9 +255,9 @@ const handleDelete = (index) => {
     type: "warning",
   })
     .then(() => {
-      const newList = [...fileList.value];
+      const newList = [...safeFileList.value]; // 改用 safeFileList
       newList.splice(index, 1);
-      fileList.value = newList;
+      safeFileList.value = newList; // 改用 safeFileList
       // 删除后关闭popover
       popoverVisible.value = false;
     })
@@ -270,20 +272,21 @@ const handleMultiDelete = () => {
     type: "warning",
   })
     .then(() => {
-      const newList = fileList.value.filter(
+      const newList = safeFileList.value.filter(
+        // 改用 safeFileList
         (item) => !selectedIds.value.includes(item.id),
       );
-      fileList.value = newList;
+      safeFileList.value = newList; // 改用 safeFileList
       selectedIds.value = [];
     })
     .catch(() => {});
 };
 
-// 监听外部文件列表变化
+// 监听外部文件列表变化（改为监听 safeFileList，无需额外处理）
 watch(
-  () => props.modelValue,
+  () => safeFileList.value,
   (newVal) => {
-    fileList.value = newVal;
+    // 空监听，仅保证响应式（safeFileList 已处理类型兼容）
   },
   { deep: true },
 );