为什么在尝试使用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针对Upload的文档，传递给onChange的对象具有以下属性：

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

1. 当前操作的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中。