naive ui upload 组件 file.name 属性为 undefined 的解决方案
本文将解决在使用 Naive UI Upload 组件时遇到的 file.name 属性值为 undefined 的问题。问题根源在于开发者对 generatedata 函数参数的类型定义理解有误，导致无法正确访问文件对象的属性。
下图展示了问题所在：
以下代码片段展示了开发者尝试在 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 组件数据传递机制的误解，并非组件本身的错误。
