当前位置：网站首页>It is forbidden to trigger onchange in antd upload beforeupload

It is forbidden to trigger onchange in antd upload beforeupload

2022-07-06 16:14:00 【Dream height 1.8 meters】

Official website ：https://ant.design/components/upload-cn/#components-upload-demo-upload-png-only
Insert picture description here
Add a little note ：beforeUpload Property returns false or Promise.reject, It will only block uploading （ The upload request will not be triggered ）, however onchange Function will still trigger , Want to stop onchange function , need beforeUpload return Upload.LIST_IGNORE

1 return false or Promise.reject

<html>

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/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(' Trigger onchange') if (info.file.status == 'uploading') {
       antd.message.info(' Uploading ') } if (info.file.status === 'done') {
       antd.message.info(' Upload successful ') } else if (info.file.status === 'error') {
       antd.message.info(' Upload failed ') } } return <antd.Upload name='file' action='https://www.mocky.io/v2/5cc8019d300000980a055e76' headers={
      {
       authorization: 'authorization-text', }} onChange={
      info => onChange(info)} beforeUpload={
      beforeUpload} > <antd.Button> Upload </antd.Button> </antd.Upload > } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>

</html>

Insert picture description here

2 return Upload.LIST_IGNORE

<html>

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/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(' Trigger onchange') if (info.file.status == 'uploading') {
       antd.message.info(' Uploading ') } if (info.file.status === 'done') {
       antd.message.info(' Upload successful ') } else if (info.file.status === 'error') {
       antd.message.info(' Upload failed ') } } return <antd.Upload name='file' action='https://www.mocky.io/v2/5cc8019d300000980a055e76' headers={
      {
       authorization: 'authorization-text', }} onChange={
      info => onChange(info)} beforeUpload={
      beforeUpload} > <antd.Button> Upload </antd.Button> </antd.Upload > } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>

</html>

Insert picture description here
I tried , If you use promise, If you don't return resove() or reject()( Nothing returns ),onchange It doesn't trigger .