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

Question

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

表格如下：

 <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);
  };

所需的一切都是进口的。

Answer 1

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

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

file File object for the current operation

 {
   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 current list of files

event response from server, including uploading progress, supported by advanced browsers

所以尝试登录 e，你会发现你要找的东西在 e.fileList.

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

Why is e.target.files undefined when trying to use antd file upload component?

reactjs

antd