在使用Ant Design中的Upload组件时,如果存在onChange事件的问题,可以尝试使用如下的代码示例进行解决:
import { Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
// 自定义上传函数
function customRequest(file) {
// 这里需要自行编写上传文件的函数
}
class MyUpload extends React.Component {
state = {
imageUrl: '',
loading: false,
};
handleChange = info => {
if (info.file.status === 'uploading') {
this.setState({ loading: true });
return;
}
if (info.file.status === 'done') {
const imageUrl = info.file.response.imageUrl;
this.setState({
imageUrl,
loading: false,
});
}
};
render() {
const { imageUrl, loading } = this.state;
const uploadButton = (
{loading ? : }
点击上传
);
return (
{imageUrl ?
: uploadButton}
);
}
}
ReactDOM.render( , mountNode);
这段代码中,我们自定义了一个Upload组件的子组件,命名为MyUpload,其中包括了一个使用自定义上传函数的Upload组件,并在组件中定义了一个handleChange函数,用于处理上传事件的逻辑。
在handleChange函数中,我们对上传状态进行了判断,当文件正在上传时,显示加载动画;当文件上传完成后,取出返回的文件url,更新组件中的imageUrl和loading状态。在组件渲染时,我们检查是否有imageURL,如有则显示上传的图片,否则显示上传按钮。
以上示例代码可