Ant Design Upload组件可以通过调用onChange
方法获取上传文件的内容。以下是一个示例代码:
import { Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
const App = () => {
const handleChange = (info) => {
console.log(info.file); // 上传文件的信息
if (info.file.status === 'done') {
// 获取上传文件的内容
const reader = new FileReader();
reader.onload = (e) => {
console.log(e.target.result); // 上传文件的内容
};
reader.readAsText(info.file.originFileObj);
}
};
return (
}>Click to Upload
);
};
export default App;
在handleChange
方法中,我们首先可以通过info.file
获取上传文件的信息。然后,我们检查文件的status
属性,如果文件上传完成(status
为done
),我们可以通过FileReader
读取文件的内容。最后,我们可以通过e.target.result
获取文件的内容。
在上述代码中,我们使用了
和组件来创建上传按钮。当用户点击上传按钮选择文件后,
onChange
方法会被调用,并将上传文件的信息传递给handleChange
方法处理。