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

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

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

Web Accessibility (WCAG 2 AA))

将 WCAG 2 AA 无障碍标准应用于设计系统、UI 组件和网页——通过可运行的验证器进行对比度计算，采用设计 token 模式使颜色天生可访问，设定排版和焦点状态规则，并提供语义检查清单。适用于构建或审查 UI。

下载

问题原因及解决方法：

问题在于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的问题，成功获取上传文件的文件名。