官网：https://ant.design/components/upload-cn/#components-upload-demo-upload-png-only
稍微加点注释：beforeUpload属性返回false或Promise.reject，只会阻止上传（不会触发上传的请求），但是onchange函数还是会触发的，想要阻止onchange函数，需要beforeUpload返回Upload.LIST_IGNORE
1 返回false或Promise.reject
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.20.6/antd.min.js"
integrity="sha512-Pn2PLpM5OByFVBBfe517wK9LQCCbQsM4sVl7y3yHDCpHL/X/k6st3cre9SUiopZrbBiOQiSDgvKMOagM6MWCnA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.20.6/antd.min.css"
integrity="sha512-GKJ7hcKFof/Chhk79mhxA8egInBxwypeeD9sF/fAlTJ75n0YvjQ8mSofBD7KahRnMTzdtUFF5+YWjnXTew8Y0w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const e = React.createElement;
const custom = () => {
const [number, setNumber] = React.useState(0);
const beforeUpload = file => {
const isPNG = file.type == 'image/png';
return isPNG;
// return new Promise(()=>{
// const isPNG = file.type == 'image/png';
// if(isPNG) {
// resolve();
// }
// else {
// reject();
// }
// })
}
const onChange = info => {
antd.message.info('触发onchange')
if (info.file.status == 'uploading') {
antd.message.info('正在上传')
}
if (info.file.status === 'done') {
antd.message.info('上传成功')
}
else if (info.file.status === 'error') {
antd.message.info('上传失败')
}
}
return <antd.Upload name='file'
action='https://www.mocky.io/v2/5cc8019d300000980a055e76'
headers={
{
authorization: 'authorization-text',
}}
onChange={
info => onChange(info)}
beforeUpload={
beforeUpload}
>
<antd.Button>上传</antd.Button>
</antd.Upload >
}
const domContainer = document.querySelector('#root');
ReactDOM.render(e(custom), domContainer);
</script>
</html>
2 返回Upload.LIST_IGNORE
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.20.6/antd.min.js"
integrity="sha512-Pn2PLpM5OByFVBBfe517wK9LQCCbQsM4sVl7y3yHDCpHL/X/k6st3cre9SUiopZrbBiOQiSDgvKMOagM6MWCnA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.20.6/antd.min.css"
integrity="sha512-GKJ7hcKFof/Chhk79mhxA8egInBxwypeeD9sF/fAlTJ75n0YvjQ8mSofBD7KahRnMTzdtUFF5+YWjnXTew8Y0w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const e = React.createElement;
const custom = () => {
const [number, setNumber] = React.useState(0);
const beforeUpload = file => {
const isPNG = file.type == 'image/png';
return isPNG || antd.Upload.LIST_IGNORE;
// return new Promise(()=>{
// const isPNG = file.type == 'image/png';
// if(isPNG) {
// resolve();
// }
// else {
// return antd.Upload.LIST_IGNORE;
// }
// })
}
const onChange = info => {
antd.message.info('触发onchange')
if (info.file.status == 'uploading') {
antd.message.info('正在上传')
}
if (info.file.status === 'done') {
antd.message.info('上传成功')
}
else if (info.file.status === 'error') {
antd.message.info('上传失败')
}
}
return <antd.Upload name='file'
action='https://www.mocky.io/v2/5cc8019d300000980a055e76'
headers={
{
authorization: 'authorization-text',
}}
onChange={
info => onChange(info)}
beforeUpload={
beforeUpload}
>
<antd.Button>上传</antd.Button>
</antd.Upload >
}
const domContainer = document.querySelector('#root');
ReactDOM.render(e(custom), domContainer);
</script>
</html>
我试了一下，如果使用promise，如果不返回resove()或reject()(啥返回都没有的情况)，onchange也不会触发。
ps：网页里使用react和antd的情况，可以看这个
https://blog.csdn.net/weixin_43915401/article/details/125046690