当前位置:网站首页>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
边栏推荐
- Penetration test 2 --- XSS, CSRF, file upload, file inclusion, deserialization vulnerability
- [exercise-4] (UVA 11988) broken keyboard = = (linked list)
- Information security - Epic vulnerability log4j vulnerability mechanism and preventive measures
- Problem - 922D、Robot Vacuum Cleaner - Codeforces
- Write web games in C language
- Codeforces Round #803 (Div. 2)A~C
- 1005. Maximized array sum after K negations
- pytorch提取骨架(可微)
- 2027. Minimum number of operations to convert strings
- Penetration test (8) -- official document of burp Suite Pro
猜你喜欢
[exercise-7] crossover answers
Penetration testing (5) -- a collection of practical skills of scanning King nmap and penetration testing tools
Configuration du cadre flask loguru log Library
Programmers, what are your skills in code writing?
Penetration test (2) -- penetration test system, target, GoogleHacking, Kali tool
渗透测试 ( 5 ) --- 扫描之王 nmap、渗透测试工具实战技巧合集
Radar equipment (greedy)
Penetration test (4) -- detailed explanation of meterpreter command
628. Maximum product of three numbers
Nodejs+vue online fresh flower shop sales information system express+mysql
随机推荐
b站 实时弹幕和历史弹幕 Protobuf 格式解析
Problem - 1646C. Factorials and Powers of Two - Codeforces
D - function (HDU - 6546) girls' competition
Information security - threat detection engine - common rule engine base performance comparison
Nodejs crawler
CEP used by Flink
antd upload beforeUpload中禁止触发onchange
Read and save zarr files
New to redis
读取和保存zarr文件
875. 爱吃香蕉的珂珂 - 力扣(LeetCode)
Opencv learning log 24 -- Hough transform 2 (maximum interval and minimum length can be limited)
7-1 understand everything (20 points)
Alice and Bob (2021 Niuke summer multi school training camp 1)
QNetworkAccessManager实现ftp功能总结
[teacher Gao UML software modeling foundation] collection of exercises and answers for level 20 cloud class
frida hook so层、protobuf 数据解析
Codeforces Round #797 (Div. 3)无F
Analysis of protobuf format of real-time barrage and historical barrage at station B
Codeforces Round #801 (Div. 2)A~C