当前位置:网站首页>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
边栏推荐
- 807. Maintain the urban skyline
- Web based photo digital printing website
- (POJ - 2739) sum of constructive prime numbers (ruler or two points)
- Flag framework configures loguru logstore
- 双向链表—全部操作
- 图图的学习笔记-进程
- TCP's three handshakes and four waves
- 生成随机密码/验证码
- Information security - Analysis of security orchestration automation and response (soar) technology
- Codeforces Round #801 (Div. 2)A~C
猜你喜欢
C language must memorize code Encyclopedia
Penetration test (2) -- penetration test system, target, GoogleHacking, Kali tool
b站 实时弹幕和历史弹幕 Protobuf 格式解析
1529. Minimum number of suffix flips
921. Minimum additions to make parentheses valid
“鬼鬼祟祟的”新小行星将在本周安全掠过地球:如何观看
Openwrt source code generation image
409. Longest palindrome
PySide6 信号、槽
969. Pancake sorting
随机推荐
1013. Divide the array into three parts equal to and
The most complete programming language online API document
读取和保存zarr文件
Information security - threat detection - Flink broadcast stream broadcaststate dual stream merging application in filtering security logs
第 300 场周赛 - 力扣(LeetCode)
(POJ - 3685) matrix (two sets and two parts)
Codeforces Round #798 (Div. 2)A~D
Interesting drink
The concept of C language array
树莓派4B64位系统安装miniconda(折腾了几天终于解决)
Information security - Epic vulnerability log4j vulnerability mechanism and preventive measures
Web based photo digital printing website
Pyside6 signal, slot
Is the sanic asynchronous framework really so strong? Find truth in practice
TCP's three handshakes and four waves
Openwrt build Hello ipk
Essai de pénétration (1) - - outils nécessaires, navigation
Basic Q & A of introductory C language
渗透测试 ( 1 ) --- 必备 工具、导航
antd upload beforeUpload中禁止触发onchange