怎样修改AntD Upload组件，文件名前面的图标

Question

如图，Antd Upload组件中的文件列表，文件名之前的图标都是这种“回形针”形状。
现在有个需求，想要根据文件类型，显示不同的图标。
比如Excel文件的话，就显示Excel图标；PDF文件的话，就显示PDF图标。

Answer 1

ant design里面的ShowUploadList并没有提供相关的选项

interface ShowUploadListInterface {
    showRemoveIcon?: boolean;
    showPreviewIcon?: boolean;
    showDownloadIcon?: boolean;
    removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
    downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
}

不过可以自己重写一下UploadList的显示，下面是参考代码

import { Progress, Upload as AntdUpload, UploadProps } from 'antd'
import { UploadFile } from 'antd/lib/upload/interface'
import React, { useState } from 'react'
import { Pagination } from '../pagination/pagination'
import {
  PlayCircleOutlined,
  CustomerServiceOutlined,
  FileFilled,
  UploadOutlined,
  WarningFilled,
} from '@ant-design/icons'
import classNames from 'classnames'

export type {
  UploadProps,
  UploadListProps,
  UploadChangeParam,
  RcFile,
  DraggerProps,
} from 'antd/lib/upload'

const getSuffix = (filename: string): string => {
  const index = filename.lastIndexOf('.')

  return filename.slice(index)
}

const getIcon = (file: UploadFile): JSX.Element => {
  if (file.status === 'error')
    return <WarningFilled className="ru-upload-warn-icon" />
  return mappingSuffixToIcon[getSuffix(file.name)] ?? <FileFilled />
}

const mappingSuffixToIcon: Record<string, JSX.Element> = {
  mp4: <PlayCircleOutlined />,
  mp3: <CustomerServiceOutlined />,
}

const UploadFileList: React.FC<{
  data: UploadFile[]
  handleDeleteFile: (file: UploadFile) => void
}> = ({ data, handleDeleteFile }) => {
  return (
    <div className="ru-upload-file-list">
      {data.map((v) => (
        <div className="ru-upload-file-list-item" key={v.name}>
          <div className="ru-file-info">
            <div className="ru-file-name">
              <span className="ru-file-icon-container">{getIcon(v)}</span>
              {v.name}
            </div>
            <div className="actions">
              <span
                onClick={() => {
                  handleDeleteFile(v)
                }}
              >
                删除
              </span>
            </div>
          </div>
          {v.status === 'uploading' && (
            <Progress
              percent={v.percent ?? 0}
              showInfo={false}
              strokeWidth={3}
              strokeColor="#3278C4"
            />
          )}
        </div>
      ))}
      <div className="pagination-container">
        <Pagination
          size="small"
          //   hideOnSinglePage
          pageSize={5}
          total={data.length}
          simple
        />
      </div>
    </div>
  )
}

const UploadChildren = React.memo(() => {
  return (
    <div className="ru-upload-children">
      <div className="ru-add-file">
        <UploadOutlined className="ru-upload-icon" />
        <span>添加文件</span>
      </div>
      <div className="ru-upload-tip">单个文件不超过 15m</div>
    </div>
  )
})

export const Upload: React.FC<UploadProps> = ({
  showUploadList: showUploadListProp,
  onChange: originOnChange,
  fileList: fileListProp,
  ...rest
}) => {
  const [fileList, setFileList] = useState<UploadFile[]>(fileListProp ?? [])
  const handleDeleteFile = (file: UploadFile) => {
    const nextFileList: UploadFile[] = []

    for (let i = 0; i < fileList.length; ++i) {
      if (fileList[i] !== file) {
        nextFileList.push(fileList[i])
      }
    }

    setFileList(nextFileList)
  }

  return !!showUploadListProp ? (
    <div>
      <UploadFileList data={fileList} handleDeleteFile={handleDeleteFile} />
      <AntdUpload
        {...rest}
        className={classNames(rest.className, 'ru-upload')}
        onChange={(info) => {
          const { fileList } = info
          setFileList(fileList)
          originOnChange?.(info)
        }}
        showUploadList={false}
        fileList={fileList}
      >
        <UploadChildren />
      </AntdUpload>
    </div>
  ) : (
    <AntdUpload {...rest} onChange={originOnChange} />
  )
}

less

@import '../style/antd-vars-override.less';

.ru-upload-file-list {
  border: 1px solid #dcdee0;
  padding: 16px;

  .ru-upload-file-list-item {
    padding: 0.2rem 0;
  }

  .ru-file-info {
    display: flex;
    justify-content: space-between;

    color: #555556;
    font-size: 14px;
  }

  .actions {
    color: @primary-color;

    > span {
      cursor: pointer;
    }
  }

  .ru-file-icon-container {
    color: @primary-color;
    margin-right: 0.5rem;
  }

  .ru-upload-warn-icon {
    color: @error-color;
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
}

.ru-upload-children {
  border: 1px solid #dcdee0;
  padding: 16px;
  border-top: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .ru-upload-icon {
    color: @primary-color;
    font-size: 16px;
    margin-right: 0.2rem;
  }

  .ru-add-file {
    color: #555556;
  }

  .ru-upload-tip {
    color: #9e9fa1;
    margin-top: 13px;
  }
}

.ru-upload {
  width: 100%;
  display: inline-block;

  .ant-upload {
    width: 100%;
  }
}