reacthooks中用antd Upload 附件上传（附件大小不超过2M具体操作）
程序员文章站
2022-07-03 17:08:04
标题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