为什么尝试使用antd文件上传组件时e.target.files未定义？

【问题标题】：Why is e.target.files undefined when trying to use antd file upload component?为什么尝试使用antd文件上传组件时e.target.files未定义？
【发布时间】：2021-04-12 01:07:18
【问题描述】：

使用 antd 文件上传组件，我似乎无法访问所选文件以添加到组件状态。我不断收到“无法读取未定义的属性'文件'”。这就是我在仅使用常规输入元素时所做的。

这是表格：

 <Col>
          <Container className={classes.formBox}>
            <Form>
              <Upload
                type='file'
                listType='picture-card'
                onPreview={handlePreview}
                onChange={handleChange}
                multiple
              >
                {uploadButton}
              </Upload>
              <Modal>
                <img alt='example' style={{ width: '100%' }} />
              </Modal>
            </Form>
          </Container>
        </Col>

这里是 handleChange 函数（这是我得到错误的地方）：

const handleChange = (e) => {
    console.log(e.target.files);
  };

所有需要的东西都被导入了。

【问题讨论】：

标签： reactjs antd

【解决方案1】：

根据Ant Design的documentation for Upload，传递给onChange的对象有以下属性：

{
  file: { /* ... */ },
  fileList: [ /* ... */ ],
  event: { /* ... */ },
}

file当前操作的文件对象

 {
   uid: 'uid',      // unique identifier, negative is recommend, to prevent interference with internal generated id
   name: 'xx.png',   // file name
   status: 'done', // options：uploading, done, error, removed. Intercepted file by beforeUpload don't have status field.
   response: '{"status": "success"}', // response from server
   linkProps: '{"download": "image"}', // additional html props of file link
   xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header
}

fileList当前文件列表

event 来自服务器的响应，包括上传进度，高级浏览器支持

所以尝试记录e，您会发现您要查找的内容在e.fileList 中。

【讨论】：

非常感谢，请务必仔细阅读文档！