如何解决在使用Naive UI Upload组件时 file.name 为 undefined？

Question

在使用Naive UI 的 Upload 组件时，有如下代码逻辑（已做简化）

我想利用 generateData 在提交的表单上附加数据，但直接读取 file.name 始终为 undefined，直接打印 file 到控制台和使用 JSON.stringify 却能获得符合预期的结果。

<script lang="ts" setup>

const generateData = (file: UploadFileInfo) => {
  const objectName = file.name
  console.log('generateData', objectName)
  console.log(JSON.stringify(file, null, 2))
  console.log(file)
  return {
    ...pick(ossDirectPostObjectInfo.value!, ['ossAccessKeyId', 'policy', 'signature']),
    key: objectName,
    'x-oss-meta-user': userStore.userVO!.id.toString()
  }
}
</script>

<template>
  <n-upload
    :data="generateData"
  />
</template>

期望正常读取 file.name

Answer 1

抱歉，是我误将 ({ file: UploadFileInfo }) => Object 当成 (file: UploadFileInfo) => Object 了，已解决。

Answer 2

const generateData = (file: UploadFileInfo) => {
  // 使用Vue3的toRaw函数获取源对象，避免响应式代理导致的问题
  const nativeFile = toRaw(file);

  const objectName = nativeFile.name || file.raw.name; // 尝试两种方式获取文件名

  // 打印调试信息
  console.log('generateData', objectName);
  console.log(JSON.stringify(file, null, 2));
  console.log(file);

  return {
    ...pick(ossDirectPostObjectInfo.value!, ['ossAccessKeyId', 'policy', 'signature']),
    key: objectName,
    'x-oss-meta-user': userStore.userVO!.id.toString()
  };
};

import { toRaw } from '@vue/reactivity';