当前位置:网站首页>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
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>
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>
I tried , If you use promise, If you don't return resove()
or reject()
( Nothing returns ),onchange It doesn't trigger .
ps: Use in web pages react and antd The situation of , You can see this
https://blog.csdn.net/weixin_43915401/article/details/125046690
边栏推荐
- HDU - 6024 building shops (girls' competition)
- Penetration test (4) -- detailed explanation of meterpreter command
- (POJ - 3579) median (two points)
- Penetration test (3) -- Metasploit framework (MSF)
- Suffix expression (greed + thinking)
- [exercise-8] (UVA 246) 10-20-30== simulation
- [exercise-9] Zombie's Treasury test
- Vs2019 initial use
- (POJ - 3685) matrix (two sets and two parts)
- C basic grammar
猜你喜欢
Vs2019 initial use
C language is the watershed between low-level and high-level
Essai de pénétration (1) - - outils nécessaires, navigation
1689. Ten - the minimum number of binary numbers
Openwrt build Hello ipk
快速转 TypeScript 指南
QT按钮点击切换QLineEdit焦点(含代码)
[exercise-5] (UVA 839) not so mobile (balance)
“鬼鬼祟祟的”新小行星将在本周安全掠过地球:如何观看
Information security - threat detection engine - common rule engine base performance comparison
随机推荐
QWidget代码设置样式表探讨
(POJ - 3258) River hopper (two points)
树莓派4B64位系统安装miniconda(折腾了几天终于解决)
Information security - threat detection - detailed design of NAT log access threat detection platform
Gartner: five suggestions on best practices for zero trust network access
860. Lemonade change
渗透测试 ( 3 ) --- Metasploit Framework ( MSF )
QT实现窗口置顶、置顶状态切换、多窗口置顶优先关系
Nodejs crawler
Find 3-friendly Integers
Programmers, what are your skills in code writing?
Opencv learning log 26 -- detect circular holes and mark them
[exercise-7] (UVA 10976) fractions again?! (fraction split)
Codeforces Round #803 (Div. 2)A~C
PySide6 信号、槽
Auto. Getting started with JS
Radar equipment (greedy)
Analysis of protobuf format of real-time barrage and historical barrage at station B
AcWing——第55场周赛
Data storage in memory & loading into memory to make the program run