标签导航：

naive ui upload 组件 file.name 属性为 undefined 的解决方案

本文将解决在使用 Naive UI Upload 组件时遇到的 file.name 属性值为 undefined 的问题。问题根源在于开发者对 generatedata 函数参数的类型定义理解有误，导致无法正确访问文件对象的属性。

下图展示了问题所在：

Naive UI Upload组件中file.name为undefined如何解决？

以下代码片段展示了开发者尝试在 generatedata 函数中获取上传文件名：

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()
  };
};

预期 file.name 应该返回文件名，但实际结果是 undefined。尽管 console.log(file) 和 JSON.stringify(file) 能正常打印文件对象内容，但直接访问 file.name 却失败。

根本原因在于 generatedata 函数的参数定义。Naive UI Upload 组件传递给 generatedata 函数的参数并非直接的 UploadFileInfo 对象，而是一个包含 file 属性的对象。因此，正确的 generatedata 函数定义应如下：

const generateData = ({ file }: { file: UploadFileInfo }) => {
  const objectName = file.name;
  // ...后续代码
};

通过修改 generatedata 函数的参数定义，使用对象解构语法提取 file 属性，从而正确访问 file.name 属性，解决了 file.name 为 undefined 的问题。 这使得函数能够正确地获取 file 对象并访问其 name 属性。 问题在于对 Naive UI Upload 组件数据传递机制的误解，并非组件本身的错误。