Reactjs中用antd的Upload组件上传文件并且限制上传文件的大小_antd upload 上传文件上传0kb以上的文件-CSDN博客

本文链接：https://blog.csdn.net/weixin_46573466/article/details/109391079

本文介绍了如何在React应用中利用Ant Design的Upload组件实现文件上传，并通过beforeUpload函数限制上传文件大小不超过10MB。关键代码展示了如何检查文件大小，转换比特单位为兆字节进行比较。通过设置beforeUpload回调，确保了上传文件符合指定大小要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Reactjs中用antd的Upload组件上传文件并且限制上传文件的大小

1.antd官网Upload组件：

https://ant.design/components/upload-cn/antd官网
antd封装了一些实用的组件，但具体的api写的不是很详细，这篇文章主要介绍Upload中的附件传送时大小不超过具体的值得操作。

2.组件代码如下：

import React from 'react';
import { Upload } from 'antd';
import { InboxOutlined } from '@ant-design/icons/lib';

const index: React.FC = () => {

  //检查文件大小
  const checkFileSize = (file: any) => {
    return file.size / 1024 / 1024 < 2;
  };

  return (
    <Upload.Dragger
	  method="post"
	  accept="*"
	  name="调用接口的参数名称"
	  action={'需要调用上传文件的接口地址'}
	  beforeUpload={checkFileSize}
	>
	  <p className="ant-upload-drag-icon">
	    <InboxOutlined />
	  </p>
	  <p className="ant-upload-text">点击或者拖拽来提交文件</p>
	  <p>附件大小不超过2M</p>
	  <p className="ant-upload-hint">支持单次或者批量上传</p>
	</Upload.Dragger>
  );
};

export default index;