在使用Ant Design（antd）框架时，`Upload`组件提供了多种展示方式，其中`picture-card`模式是一种非常直观且美观的选择。然而，在实际开发过程中，你可能会遇到这样一个问题：当上传文件时，`picture-card`模式下无法正常显示文件名。
问题描述
默认情况下，`picture-card`模式下的`Upload`组件只展示了图片预览和删除按钮，而文件名并未显示出来。这可能会影响用户体验，尤其是在需要明确知道上传了哪些文件的情况下。
解决方案
要解决这个问题，可以通过自定义`fileList`属性来实现对文件名的显示。具体步骤如下：
1. 设置`fileList`属性
`fileList`是一个数组，用来存储当前上传的文件信息。每个文件对象包含多个字段，如`name`（文件名）、`url`（文件路径）等。
2. 自定义渲染逻辑
在`render`方法中，通过遍历`fileList`，手动添加文件名的显示逻辑。
以下是完整的代码示例：
```jsx
import React from 'react';
import { Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
class PictureCardExample extends React.Component {
handleUpload = ({ file, onSuccess }) => {
setTimeout(() => {
onSuccess('Ok');
}, 0);
};
render() {
const props = {
name: 'file',
action: '//jsonplaceholder.typicode.com/posts/',
headers: {
authorization: 'authorization-text',
},
fileList: [
{
uid: '-1',
name: 'example.png', // 文件名
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
],
onChange(info) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
customRequest: this.handleUpload,
};
return (
{props.fileList.length >= 3 ? null :
);
}
}
export default PictureCardExample;
```
关键点解析
1. `fileList`的结构
每个文件对象必须包含`uid`、`name`、`status`和`url`等关键字段。`uid`用于唯一标识文件，`name`是文件名，`status`表示文件状态，`url`是文件的预览链接。
2. 自定义渲染逻辑
如果需要更复杂的UI展示，可以直接覆盖默认的渲染逻辑，例如在图片下方添加文字说明。
3. 性能优化
避免一次性加载过多文件，可以通过限制`fileList`的最大长度或动态加载的方式来提升性能。
总结
通过上述方法，我们可以轻松实现`picture-card`模式下文件名的显示。这种自定义的方式不仅解决了默认功能的局限性，还为后续的功能扩展提供了更大的灵活性。希望本文能帮助你更好地理解和应用Ant Design的`Upload`组件！
