React.js中Ant Design Upload组件如何显示文件名与文件大小？

核心结论 #

Ant Design Upload组件的listType="picture"默认样式无法直接同时显示文件名与文件大小，必须通过自定义渲染逻辑结合组件props来实现。

实现步骤 #

1. 维护包含文件大小的fileList状态 #

上传本地文件时，Ant Design会自动为fileList中的每个文件对象添加size属性；如果是初始化的示例数据，需要手动补充该字段，确保后续渲染时有数据可用。

2. 使用itemRender自定义列表项内容 #

通过Upload组件的itemRender属性，自定义每个文件项的展示结构，同时渲染文件名和格式化后的文件大小。

完整修改后的代码示例 #

import React, { useState } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Upload, Tooltip } from 'antd';
import { formatFileSize } from 'antd/es/upload/utils'; // 用Ant Design内置工具函数格式化文件大小

export default function UploadFile() {
    const [fileList, setFileList] = useState([
        {
            uid: '-1',
            name: 'xxx.png',
            status: 'done',
            url: 'https://reactnative.dev/img/tiny_logo.png',
            size: 12345, // 手动补充示例文件大小
        },
    ]);

    const uploadProps = {
        action: 'https://reactnative.dev/img/tiny_logo.png',
        multiple: true,
        fileList,
        onChange: ({ fileList: newFileList }) => {
            setFileList(newFileList);
            localStorage.setItem('image', JSON.stringify(newFileList));
        },
        // 自定义文件项渲染逻辑
        itemRender: (originNode, file) => {
            return (
                <div>
                    {/* 保留原有的图片预览节点 */}
                    {originNode}
                    {/* 新增文件名与大小展示区域 */}
                    <div style={{ marginTop: 8, textAlign: 'center' }}>
                        <Tooltip title={file.name}>
                            <span style={{ 
                                display: 'block', 
                                overflow: 'hidden', 
                                textOverflow: 'ellipsis', 
                                whiteSpace: 'nowrap' 
                            }}>
                                {file.name}
                            </span>
                        </Tooltip>
                        <span style={{ fontSize: 12, color: '#999' }}>
                            {formatFileSize(file.size)}
                        </span>
                    </div>
                </div>
            );
        },
    };

    return (
        <Upload {...uploadProps}>
            <Button icon={<UploadOutlined />}>Upload</Button>
        </Upload>
    );
}

关键说明 #

• 借助Ant Design内置的formatFileSize工具函数，可自动将字节数转换为KB/MB等易读格式，无需自行编写格式化逻辑。
• itemRender属性既保留了组件默认的图片预览功能，又允许自由扩展文件信息展示内容，兼顾原有交互与自定义需求。
• 上传本地文件时，组件会自动为文件对象注入size属性；初始化静态数据时需手动补充该字段。

内容的提问来源于stack exchange，提问作者muhammad areeb