为什么使用antd文件上传组件时e.target.files为undefined

Antd Upload组件的onChange回调传参与原生<input type="file">的事件传参逻辑完全不兼容，是触发报错的核心原因：

• 原生文件上传input的onChange回调参数是浏览器原生DOM事件对象，e.target指向input元素本身，自带files属性存储选中文件，因此原有取值逻辑在原生环境可正常运行
• Antd Upload的onChange回调不会直接返回原生DOM事件，而是返回组件内部封装的结构化对象，结构为{ file, fileList, event }；原代码直接把入参当原生事件读取e.target，得到undefined后访问files属性就会触发报错
• 代码冗余说明：给Upload组件设置的type='file'是原生input的属性，不属于Upload的合法配置项，设置后不会产生任何效果

• 优先使用Antd提供的标准取值路径，通过回调封装对象的fileList字段获取选中文件集合，直接存入组件状态即可
• 修正后的handleChange实现示例：

const handleChange = (info) => {
  // info为Antd封装的回调参数，fileList即当前所有选中文件
  const selectedFiles = info.fileList;
  // 直接将文件列表存入组件状态
  // setUploadedFileList(selectedFiles);
  console.log('选中的文件列表：', selectedFiles);
}

• 若需要获取原生事件的files结构，需从回调对象的event字段中提取透传的原生事件，同时做好空值兼容：

const handleChange = (info) => {
  // 原生事件仅在组件未拦截原生上传流程时存在，需做空值判断
  const nativeFiles = info.event?.target?.files;
  if (nativeFiles) {
    console.log(nativeFiles);
  }
}

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