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.具体代码如下:
</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具体操作)
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;
};
如果需要的文件上传大小为10M,可以书写为file.size / 1024 / 1024 < 10,因为Upload中的文件使用比特为单位的,所以需要转换一下
第一次写文章,只是试一下,不喜勿喷,希望大家敲代码都不掉头发!
本文地址:https://blog.csdn.net/weixin_46573466/article/details/109391079
下一篇: 2020-10-29