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

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.Draggermethod="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;

如果需要的文件上传大小为10M，可以书写为file.size / 1024 / 1024 < 10，因为Upload中的文件使用比特为单位的，所以需要转换一下，这里我们只展示beforeUpload的用法，大家不喜勿喷，如果有用，动动小手点个赞，新人小白，需要关爱！