Naive UI Upload组件中file.name属性为undefined问题的解决方法
在使用Naive UI的Upload组件上传文件时，获取文件名（file.name）是常见需求。然而，有时会遇到file.name为undefined的情况。本文将分析此问题，并提供解决方案。
问题描述：
在Naive UI Upload组件的generatedata函数中，尝试获取上传文件的名称file.name，却得到undefined。尽管通过控制台打印file对象或使用JSON.stringify可以查看文件信息，但直接访问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 {
// ...其他代码
key: objectName,
// ...其他代码
};
};
问题根源及解决方案：
问题在于generatedata函数的参数定义。 file参数并非直接包含文件信息，而是被封装在一个对象中。正确的参数定义应为({ file }: { file: UploadFileInfo }) => object。
修改后的代码：
const generateData = ({ file }: { file: UploadFileInfo }) => { // 正确的参数定义
const objectName = file.name;
console.log('generateData', objectName);
console.log(JSON.stringify(file, null, 2));
console.log(file);
return {
// ...其他代码
key: objectName,
// ...其他代码
};
};
通过更正generatedata函数的参数定义，即可解决file.name为undefined的问题，确保正确获取文件信息。
