React项目中如何取消Ant Design Upload Dragger选文件后的加载图标并替换为裁剪图标？

要替换默认的加载图标为裁剪图标，核心是手动控制文件列表的状态，并自定义列表项的渲染逻辑，具体步骤如下：

1. 用状态管理文件列表 #

在组件中添加状态维护文件信息，自定义状态标记待上传文件，避免组件默认的uploading状态触发加载图标：

import { useState } from 'react';
import { Upload, Button, InboxOutlined, CropOutlined, LoadingOutlined } from 'antd';

const YourComponent = () => {
  // 自定义文件列表，每个项包含文件对象和自定义状态
  const [fileList, setFileList] = useState([]);

  // 拦截文件选择，阻止自动上传，将文件加入自定义列表并标记为待上传
  const beforeUpload = (file) => {
    setFileList(prev => [...prev, { ...file, status: 'waiting' }]);
    return false;
  };

2. 自定义列表项渲染（替换图标） #

通过itemRender属性自定义列表项，根据自定义的waiting状态渲染裁剪图标：

// 自定义文件列表项的渲染逻辑
  const customItemRender = (originNode, file) => {
    // 待上传状态显示裁剪图标
    if (file.status === 'waiting') {
      return (
        <div className="ant-upload-list-item">
          <div className="ant-upload-list-item-info">
            <span className="ant-upload-list-item-thumbnail">
              <CropOutlined />
            </span>
            <span className="ant-upload-list-item-name">{file.name}</span>
          </div>
          <div className="ant-upload-list-item-actions">
            <span onClick={() => handleRemove(file)}>删除</span>
          </div>
        </div>
      );
    }
    // 上传中显示加载图标
    if (file.status === 'uploading') {
      return (
        <div className="ant-upload-list-item">
          <div className="ant-upload-list-item-info">
            <span className="ant-upload-list-item-thumbnail">
              <LoadingOutlined spin />
            </span>
            <span className="ant-upload-list-item-name">{file.name}</span>
          </div>
        </div>
      );
    }
    // 其他状态沿用组件默认渲染
    return originNode;
  };

3. 处理文件删除与手动上传 #

添加删除文件方法，以及点击按钮触发上传的逻辑，上传时再修改状态为上传中：

// 删除指定文件
  const handleRemove = (file) => {
    setFileList(prev => prev.filter(item => item.uid !== file.uid));
  };

  // 手动触发上传操作
  const handleUpload = () => {
    fileList.forEach(file => {
      // 先将状态改为上传中，显示加载图标
      setFileList(prev => prev.map(item => 
        item.uid === file.uid ? { ...item, status: 'uploading' } : item
      ));
      // 执行自定义上传逻辑
      attacheFile(file).then(() => {
        // 上传完成后标记为成功状态
        setFileList(prev => prev.map(item => 
          item.uid === file.uid ? { ...item, status: 'done' } : item
        ));
      }).catch(() => {
        // 上传失败标记为错误状态
        setFileList(prev => prev.map(item => 
          item.uid === file.uid ? { ...item, status: 'error' } : item
        ));
      });
    });
  };

4. 整合Dragger组件 #

将上述逻辑整合到Dragger中，替换原有的uploadProps：

const uploadProps = {
    name: 'file',
    multiple: true,
    fileList: fileList, // 使用自定义维护的文件列表
    beforeUpload: beforeUpload,
    itemRender: customItemRender,
    customRequest: () => {}, // 空函数避免组件默认触发上传
    onRemove: handleRemove,
  };

  return (
    <div>
      <Dragger {...uploadProps}>
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">Click or drag file to this area to upload</p>
        <p className="ant-upload-hint">
          Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.
        </p>
      </Dragger>
      {/* 手动上传触发按钮 */}
      <Button type="primary" onClick={handleUpload} style={{ marginTop: 16 }}>
        开始上传
      </Button>
    </div>
  );
};

export default YourComponent;

关键说明 #

• 通过beforeUpload返回false，完全接管文件添加逻辑，避免组件自动设置uploading状态导致的加载图标误显示。
• 自定义fileList的status字段，用waiting标记待上传文件，在itemRender中针对性渲染裁剪图标。
• 仅在用户点击上传按钮时，才将文件状态改为uploading并执行上传，此时才显示加载图标，消除用户误解。

内容的提问来源于stack exchange，提问作者Jack The Baker