欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

reacthooks中用antd Upload 附件上传(附件大小不超过2M具体操作)

程序员文章站 2022-04-30 19:16:30
标题reacthooks中用antd Upload 附件上传(附件大小不超过2M具体操作)1.1.antd官网Upload组件:https://ant.design/components/upload-cn/antd封装了一些实用的组件,但具体的api写的不是很详细,这篇文章主要介绍Upload中的附件传送时大小不超过具体的值得操作。2.使用的是react封装的umi框架,软件使用了webstorm,在文中按需求用了antd组件库中的Form,以及Upload组件。3.具体代码如下:

标题reacthooks中用antd Upload 附件上传(附件大小不超过2M具体操作)

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

2.使用的是react封装的umi框架,软件使用了webstorm,在文中按需求用了antd组件库中的Form,以及Upload组件。

3.具体代码如下:
<Form.Item
label=“附件”
name=“enclosure”
valuePropName=“fileList”
getValueFromEvent={normFile}
>
<Upload.Dragger
method=“post”
accept="*"
name=“file”
action={REQUEST_RUL + ‘/common/files’}
beforeUpload={checkFileSize}
>




点击或者拖拽来提交文件


附件大小不超过2M


支持单次或者批量上传


</Upload.Dragger>
</Form.Item>
<Form.Item wrapperCol={{ span: 18, offset: 10 }}>

确认

</Form.Item>
上述代码使用ts完成,然后按照antd组件的要求填写相关参数,我的附件名称为enclosure,然后使用Upload的上传方法,具体的参数可点击antd组件库中的API查看,具体说一下限制文件上传大小的操作,在Upload中有一个API是beforeUpload,现在Upload中命名此方法的名称,然后可以在外层代码中定义此方法:
const checkFileSize = (file: any) => {
console.log(file.size / 1024 / 1024 < 2);
return file.size / 1024 / 1024 < 2;
};
reacthooks中用antd Upload 附件上传(附件大小不超过2M具体操作)

如果需要的文件上传大小为10M,可以书写为file.size / 1024 / 1024 < 10,因为Upload中的文件使用比特为单位的,所以需要转换一下
第一次写文章,只是试一下,不喜勿喷,希望大家敲代码都不掉头发!

本文地址:https://blog.csdn.net/weixin_46573466/article/details/109391079