如何删除Antd文件上传组件中的预览文件图标？

有两种常用方法可以实现隐藏预览文件图标的需求：

方法一：通过CSS样式直接隐藏 #

Antd的文件上传预览图标对应特定的CSS类，你可以通过覆盖样式来隐藏它：

/* 全局隐藏所有上传列表中的预览图标 */
.ant-upload-list-item-actions .anticon-eye {
  display: none;
}

/* 若需仅针对特定上传组件隐藏，先给组件添加自定义类名，再精准定位 */
.my-custom-upload .ant-upload-list-item-actions .anticon-eye {
  display: none;
}

方法二：自定义列表项渲染（更灵活） #

利用Antd Upload组件的renderItem属性，完全自定义文件列表项的结构，不渲染预览按钮：

import { Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

// 自定义列表项渲染函数
const renderUploadItem = (item, handleRemove) => (
  <div className="ant-upload-list-item">
    <div className="ant-upload-list-item-info">
      <span className="ant-upload-list-item-name">{item.name}</span>
      <span className="ant-upload-list-item-status-text">
        {item.status === 'done' ? '上传完成' : '上传中'}
      </span>
    </div>
    <div className="ant-upload-list-item-actions">
      {/* 仅保留删除操作，移除预览按钮 */}
      <span onClick={() => handleRemove(item)}>删除</span>
    </div>
  </div>
);

const UploadComponent = () => {
  const handleRemove = (file) => {
    // 这里编写你的文件删除逻辑
  };

  return (
    <Upload
      fileList={[]}
      renderItem={(item) => renderUploadItem(item, handleRemove)}
      // 其他上传配置（如action、onChange等）
    >
      <Button icon={<UploadOutlined />}>选择文件</Button>
    </Upload>
  );
};

export default UploadComponent;

两种方法对比：

• CSS方式操作简单，适合快速全局或批量隐藏预览图标；
• 自定义渲染方式更灵活，能完全控制列表项的展示内容和交互逻辑。

内容的提问来源于stack exchange，提问作者Shitta 25