react ant design Upload 多文件上传 beforeUpload 会调用很多次,怎么只获取一次

当使用Ant Design的Upload组件实现多文件上传时,beforeUploadHandler函数会被每个选中的文件调用一次。如果您只想获取一次选中的文件而不是每个文件都触发一次处理逻辑,可以采取以下方法:

使用 useRef 钩子保存文件列表:可以使用React的useRef钩子在组件中保存一个文件列表变量,而不是使用useState。这样就可以确保文件列表只在初始选择文件时获取一次。示例代码如下:

import { Upload, Button } from 'antd';
import { useRef } from 'react';

const App = () => {
    const fileListRef = useRef([]);

    const beforeUploadHandler = (file) => {
        if (fileListRef.current.length === 0) {
            fileListRef.current.push(file);
        }
        return false; // 返回 false 阻止文件上传
    };

    return (
        <div>
            <Upload 
                beforeUpload={beforeUploadHandler}
                fileList={fileListRef.current}
            >
                <Button>选择文件</Button>
            </Upload>
        </div>
    );
};

export default App;

在上述示例中,通过useRef创建了一个fileListRef引用变量来保存文件列表,只在第一次选择文件时获取选中的文件,之后不再改变。

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2024-06-09 09:16:01       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-09 09:16:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-09 09:16:01       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-09 09:16:01       20 阅读

热门阅读

  1. 我更看好开源大模型的发展前景

    2024-06-09 09:16:01       9 阅读
  2. 云上小知识:企业选择云服务的小Tips

    2024-06-09 09:16:01       9 阅读
  3. Oracle Streams XStreams?

    2024-06-09 09:16:01       8 阅读
  4. 沪深历史行情下载,金融数据库查询

    2024-06-09 09:16:01       7 阅读
  5. TalkingData数据统计:洞察与应用

    2024-06-09 09:16:01       14 阅读
  6. gorse修改开源项目后,如何使用Docker compose发布

    2024-06-09 09:16:01       9 阅读
  7. 【无标题】1877A

    2024-06-09 09:16:01       13 阅读
  8. 嵌入式c extern的用法

    2024-06-09 09:16:01       7 阅读
  9. EntitiesSample_12. FixedTimestep

    2024-06-09 09:16:01       12 阅读
  10. idm下载管理工具优势

    2024-06-09 09:16:01       9 阅读
  11. 当我读李娟时我在想些什么

    2024-06-09 09:16:01       7 阅读