标签导航：

naive ui upload组件中file.name属性为undefined，如何解决？

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

在使用Naive UI的Upload组件上传文件时，获取文件名(file.name)有时会返回undefined。本文分析此问题并提供解决方案。

问题描述：

在generateData函数中，尝试获取上传文件的名称file.name用于构建提交表单数据：

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

尽管console.log(file)和JSON.stringify(file)显示文件信息，但objectName仍然为undefined。

问题原因及解决方法：

问题在于generateData函数的参数定义。 错误地定义为({ file: UploadFileInfo }) => object，而不是正确的(file: UploadFileInfo) => object。

generateData函数应直接接收UploadFileInfo类型的file对象，而不是将其包装在另一个对象中。 只需修改函数定义即可：

const generateData = (file: UploadFileInfo) => {
  const objectName = file.name;
  // ... rest of the code
};

修改后，即可正确访问file.name属性。

通过更正generateData函数的参数定义，即可解决file.name为undefined的问题，成功获取上传文件的文件名。