解决 naive ui 上传组件中 file.name 显示 undefined 的问题

在使用 naive ui 的 upload 组件时，开发者可能会遇到 file.name 一直为 undefined 的问题。这可能会妨碍表单数据提交，因为它阻止了从上传文件中获取文件名以便附加到表单数据中。

为了解决这个问题，我们首先需要了解为什么 file.name 始终为 undefined。在仔细检查组件的文档后，我们发现 upload 组件的 data 属性接收一个函数，该函数接收一个 uploadfileinfo 对象。该对象包含有关上传文件的信息，包括其名称、大小和类型。

Web Accessibility (WCAG 2 AA))

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

下载

然而，在提供的代码示例中，简化了 data 函数的逻辑，导致其未正确地返回一个对象。在 data 函数中，当未正确地返回一个对象时，javascript 就会将其强制转换为 undefined。这导致了 file.name 始终为 undefined 的问题。

为了解决此问题，需要更正 data 函数以使其返回一个对象。可以将以下代码添加到 data 函数中以返回一个包含 file.name 的对象：

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

此更改将确保 data 函数返回一个对象，其中包含 file.name。这将允许在提交表单时从上传文件中成功获取文件名。