Antd Upload选择大量文件后设置一个loading显示加载中,onChange被触发了,但是页面没有响应。

六二
  • 21
const uploadProps = {
    name: 'file',
    multiple: true,
    maxCount: 1000,
    listType: 'text',
    accept: fileAccept.img,
    showUploadList: { showPreviewIcon: false },
    onChange: (info: any) => {
      readFileNumRef.current = readFileNumRef.current + 1; // 判断当前加载的次数,等于选择文件数量则是加载完成
    console.log('time', readFileNumRef.current);
      if (readFileNumRef.current === info.fileList.length) {
        setFileLoading(false);
      } else {
        setFileLoading(true);
      }
    },
    beforeUpload: (file: any) => {
        setFileLoading(true);
        return false; // 不直接上传,手动上传
    }
  };

return (
    <Spin spinning={fileLoading} tip="图片加载中">
      <Upload {...uploadProps} className="importImg-text">
        <div>
            <Button icon={<PlusOutlined />}>添加图片</Button>
          </div>
      </Upload>
    </Spin>
);

onChange的事件一直有被触发。但是页面确实无任何响应,只有onChange全部结束后才响应
image.png
只有在文件都加载完了才会显示loading,加载中即使loading为true也不会显示。是什么问题呢?
image.png

回复
阅读 174
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏