当前位置:网站首页>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>
我试了一下,如果使用promise,如果不返回resove()
或reject()
(啥返回都没有的情况),onchange也不会触发。
ps:网页里使用react和antd的情况,可以看这个
https://blog.csdn.net/weixin_43915401/article/details/125046690
边栏推荐
- Penetration test (4) -- detailed explanation of meterpreter command
- What is the difficulty of programming?
- Sword finger offer II 019 Delete at most one character to get a palindrome
- Programmers, what are your skills in code writing?
- Determine the Photo Position
- 力扣:第81场双周赛
- [teacher Gao UML software modeling foundation] collection of exercises and answers for level 20 cloud class
- Interesting drink
- Interval sum ----- discretization
- 969. Pancake sorting
猜你喜欢
Read and save zarr files
树莓派4B安装opencv3.4.0
Codeforces Round #799 (Div. 4)A~H
力扣:第81场双周赛
C language learning notes
Penetration test 2 --- XSS, CSRF, file upload, file inclusion, deserialization vulnerability
X-forwarded-for details, how to get the client IP
[teacher Gao UML software modeling foundation] collection of exercises and answers for level 20 cloud class
Maximum product (greedy)
Penetration test (4) -- detailed explanation of meterpreter command
随机推荐
[analysis of teacher Gao's software needs] collection of exercises and answers for level 20 cloud class
Pyside6 signal, slot
滲透測試 ( 1 ) --- 必備 工具、導航
QT实现窗口渐变消失QPropertyAnimation+进度条
C language is the watershed between low-level and high-level
New to redis
渗透测试 ( 2 ) --- 渗透测试系统、靶机、GoogleHacking、kali工具
第 300 场周赛 - 力扣(LeetCode)
[exercise-7] (UVA 10976) fractions again?! (fraction split)
frida hook so层、protobuf 数据解析
The concept of C language array
What is the difficulty of programming?
Shell Scripting
1903. Maximum odd number in string
Penetration testing (5) -- a collection of practical skills of scanning King nmap and penetration testing tools
【练习-3】(Uva 442)Matrix Chain Multiplication(矩阵链乘)
QNetworkAccessManager实现ftp功能总结
7-1 understand everything (20 points)
Penetration test (4) -- detailed explanation of meterpreter command
E. Breaking the Wall