antd Upload组件上传新文件时如何清除旧文件仅保留最新上传文件

antd <Upload /> 组件的onChange事件默认返回全量已纳入管理的文件列表，不会单独返回本次操作新增的文件，通过新旧列表差集计算、或者选择阶段的回调就能拿到目标文件。

方案1：Ref缓存历史列表做差集对比（推荐） #

这个方案不改动组件原有上传逻辑，能完整获取文件上传的全流程状态，适配你当前使用lodash防抖的场景。注意不要用普通state存历史列表，防抖的闭包特性会导致拿到过期的state值，用useRef存储可以规避这个问题。
核心逻辑是用每个文件唯一的uid做标识，每次onChange触发时，筛选出当前列表中不在上一次缓存列表里的文件，就是本次新增的文件。
完整示例代码：

import { Upload, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import _ from 'lodash';
import { useRef, useMemo } from 'react';

export default function FileUpload() {
  // 缓存上一次的全量文件列表
  const prevFileListRef = useRef([]);

  // 处理本次新增文件的业务逻辑
  const handleUploadNewFiles = (newFiles) => {
    console.log('本次新增的文件列表：', newFiles);
    // 自定义业务逻辑，比如调用接口上传、做文件校验等
  };

  // 用useMemo包裹防抖函数，避免组件重渲染导致防抖失效
  const debouncedUploadChange = useMemo(() => {
    return _.debounce((currentFullFileList) => {
      // 生成上一次文件的uid集合，用于快速对比
      const prevFileUidSet = new Set(prevFileListRef.current.map(file => file.uid));
      // 筛选出本次新增的文件
      const newAddedFiles = currentFullFileList.filter(file => !prevFileUidSet.has(file.uid));

      if (newAddedFiles.length) {
        handleUploadNewFiles(newAddedFiles);
      }

      // 更新缓存为当前全量列表，供下次触发对比
      prevFileListRef.current = currentFullFileList;
    }, 100);
  }, []);

  return (
    <Upload
      onChange={({ fileList }) => debouncedUploadChange(fileList)}
      showUploadList={false}
      multiple
    >
      <Button type="default" shape="round" className="main-upload-btn">
        <PlusOutlined /> Add Documents
      </Button>
    </Upload>
  );
}

注意事项：

• 必须用文件自带的uid做对比依据，不要用文件名、文件大小判断，避免重名、同大小文件判断错误。
• 如果业务只需要处理上传成功的文件，可以在筛选新文件时增加状态判断：file.status === 'done'，同理过滤上传失败的文件加file.status !== 'error'即可。
• 如果你的业务有删除已上传文件的逻辑，删除操作后要同步更新prevFileListRef的缓存值，避免下次差集计算出错。

方案2：通过beforeUpload回调直接获取单次选择的文件 #

如果你的业务不需要跟踪文件上传进度、上传结果状态，可以直接用beforeUpload回调，这个回调触发时第二个参数就是用户本次选择的所有文件，不会包含历史选择的文件，逻辑更简单。
示例代码：

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

export default function FileUpload() {
  const handleUploadNewFiles = (newFiles) => {
    console.log('本次新增的文件列表：', newFiles);
    // 自定义业务逻辑
  };

  return (
    <Upload
      beforeUpload={(_, currentSelectedFiles) => {
        handleUploadNewFiles(currentSelectedFiles);
        // 如果是自定义上传逻辑，不需要组件默认上传行为，一定要return false
        return false;
      }}
      showUploadList={false}
      multiple
    >
      <Button type="default" shape="round" className="main-upload-btn">
        <PlusOutlined /> Add Documents
      </Button>
    </Upload>
  );
}

方案局限：

• beforeUpload在用户选完文件后立刻触发，拿不到后续文件上传的进度、成功/失败状态，如果需要跟踪上传全流程，优先选择方案1。

你当前的代码直接把防抖函数绑定给onChange，会导致onUploadFiles拿到的第一个参数是Upload的事件对象（结构为{ file, fileList, event }），不是纯文件列表，需要先解构出fileList再传入处理逻辑，不然会出现参数错误。

内容的提问来源于stack exchange，提问作者Zain Khan