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