fix(FileUpload/ImageUpload): 修复上传组件文件名显示和模型值格式问题

张诺

9 小时以前 df982f1554a029a57b0b21ecaa740233cab09a9d

fix(FileUpload/ImageUpload): 修复上传组件文件名显示和模型值格式问题

- 为 FileUpload 和 ImageUpload 组件添加 getFileName 函数，从 URL 提取文件名，确保文件项始终有正确的 name 属性
- 将组件 emit 的 modelValue 从拼接字符串改为完整的文件对象数组，以支持更复杂的数据结构
- 在知识库页面将附件字段从 tempFileIds（ID数组）改为 files（对象数组），并调整上传成功后的数据处理逻辑

 src/components/FileUpload/index.vue

@@ -100,7 +100,12 @@
      // 然后将数组转为对象数组

      fileList.value = list.map((item) => {

        if (typeof item === "string") {

          item = { name: item, url: item };

          item = { name: getFileName(item), url: item };

        } else {

          item = { ...item };

          if (!item.name) {

            item.name = getFileName(item.url || item.name || "");

          }

        }

        item.uid = item.uid || new Date().getTime() + temp++;

        return item;

@@ -184,7 +189,7 @@
      .concat(uploadList.value);

    uploadList.value = [];

    number.value = 0;

    emit("update:modelValue", listToString(fileList.value));

    emit("update:modelValue", fileList.value);

    proxy.$modal.closeLoading();

  }

}

@@ -221,7 +226,7 @@
        onEnd: (evt) => {

          const movedItem = fileList.value.splice(evt.oldIndex, 1)[0];

          fileList.value.splice(evt.newIndex, 0, movedItem);

          emit("update:modelValue", listToString(fileList.value));

          emit("update:modelValue", fileList.value);

        },

      });

    });


 src/components/ImageUpload/index.vue

@@ -112,10 +112,15 @@
      // 然后将数组转为对象数组

      fileList.value = list.map((item) => {

        if (typeof item === "string") {

          if (item.indexOf(baseUrl) === -1 && !isExternal(item)) {

            item = { name: baseUrl + item, url: baseUrl + item };

          const url =

            item.indexOf(baseUrl) === -1 && !isExternal(item)

              ? baseUrl + item

              : item;

          item = { name: getFileName(url), url };

          } else {

            item = { name: item, url: item };

          item = { ...item };

          if (!item.name) {

            item.name = getFileName(item.url || item.name || "");

          }

        }

        return item;

@@ -189,7 +194,7 @@
  const findex = fileList.value.map((f) => f.name).indexOf(file.name);

  if (findex > -1 && uploadList.value.length === number.value) {

    fileList.value.splice(findex, 1);

    emit("update:modelValue", listToString(fileList.value));

    emit("update:modelValue", fileList.value);

    return false;

  }

}

@@ -202,7 +207,7 @@
      .concat(uploadList.value);

    uploadList.value = [];

    number.value = 0;

    emit("update:modelValue", listToString(fileList.value));

    emit("update:modelValue", fileList.value);

    proxy.$modal.closeLoading();

  }

}

@@ -219,16 +224,13 @@
  dialogVisible.value = true;

}



// 对象转成指定字符串分隔

function listToString(list, separator) {

  let strs = "";

  separator = separator || ",";

  for (let i in list) {

    if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) {

      strs += list[i].url.replace(baseUrl, "") + separator;

// 获取文件名

function getFileName(name) {

  if (!name) return "";

  if (name.lastIndexOf("/") > -1) {

    return name.slice(name.lastIndexOf("/") + 1);

    }

  }

  return strs != "" ? strs.substr(0, strs.length - 1) : "";

  return name;

}



// 初始化拖拽排序


 src/views/collaborativeApproval/knowledgeBase/index.vue

@@ -133,7 +133,7 @@
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="附件材料" prop="tempFileIds">
        <el-form-item label="附件材料" prop="files">
          <el-upload
            v-model:file-list="fileList"
            :action="upload.url"
@@ -318,7 +318,7 @@
    keyPoints: "",
    creator: "",
    usageCount: 0,
    tempFileIds: []
    files: []
  },
  dialogVisible: false,
  dialogTitle: "",
@@ -516,7 +516,7 @@
      keyPoints: "",
      creator: userStore.nickName || "",
      usageCount: 0,
      tempFileIds: []
      files: []
    });
  } else if (type === "edit" && row) {
    dialogTitle.value = "编辑知识";
@@ -532,7 +532,7 @@
      keyPoints: row.keyPoints,
      creator: row.creator,
      usageCount: row.usageCount,
      tempFileIds: (row.commonFileList || []).map(file => file.id)
      files: row.commonFileList || []
    });
  }
  dialogVisible.value = true;
@@ -636,7 +636,7 @@
    keyPoints: "",
    creator: userStore.nickName || "",
    usageCount: 0,
    tempFileIds: []
    files: []
  });
  // 清除表单验证状态
  if (formRef.value) {
@@ -670,10 +670,10 @@
function handleUploadSuccess(res, file, uploadFiles) {
  proxy.$modal.closeLoading();
  if (res.code === 200) {
    if (!form.value.tempFileIds) {
      form.value.tempFileIds = [];
    if (!form.value.files) {
      form.value.files = [];
    }
    form.value.tempFileIds.push(res.data.tempId);
    form.value.files.push({url:res.data.tempPath,name:res.data.originalName});
    proxy.$modal.msgSuccess("上传成功");
  } else {
    proxy.$modal.msgError(res.msg);