当前位置：网站首页>antd upload beforeUpload中禁止触发onchange

antd upload beforeUpload中禁止触发onchange

2022-07-06 09:28:00 【梦想身高1米8】

官网：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/[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('触发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/[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('触发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>