react使用antd的上传组件实现文件表单一起提交功能(完整代码)
最近在刚刚开始使用react做项目,非常不熟练,非常小白。小白同学可以阅读了,因为我会写的非常简单,直白。
项目中需要实现表单中带附件提交,上传文件不单独保存调接口。
import { Form, Button, Upload } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; const normFile = (e) => { console.log('Upload event:', e); if (Array.isArray(e)) { return e; } return e && e.fileList; }; const Demo = () => { const onFinish = (values) => { console.log('Received values of form: ', values); }; return ( <Form name="validate_other" onFinish={onFinish} initialValues={{ 'input-number': 3, 'checkbox-group': ['A', 'B'], rate: 3.5, }} > <Form.Item name="upload" label="Upload" valuePropName="fileList" getValueFromEvent={normFile} > <Upload name="logo" action="/upload.do" listType="picture"> <Button icon={<UploadOutlined />}>Click to upload</Button> </Upload> </Form.Item> </Form> ); }; ReactDOM.render(<Demo />, mountNode);
这里是一个表单里面包含了一个上传文件功能。(其实这里的代码就是Antd官方文档的例子,我只进行了删除多余部分,别的都是原样放着)。
下面做一下解释。
首先我们要思考怎么实现让文件不要自动上传。antd文档是有给一个方法的就是beforeUpload,当beforeUpload方法返回false时就会停止文件的上传。
以上就可以停止文件的自动上传。接下来,我们考虑怎么把上传的文件获取并存在传给后端的参数中。
这部分代码就是上传代码的方法,因为我们需要上传文件和表单一起提交。所以我们在这个方法里进行一些修改,把文件存在formData对象里。这里先说明一下formData对象,主要就是用来传文件给后端用的。
先new一个formData对象,在把文件append进去,这样就已经把上传的文件存在了formData里。
表单中其它数据也可以通过同种方法存在formData中,把formData传给后端即可。
此时还有一个需要注意的问题。
fetch(url, { //fetch请求 method: 'POST', body: formData, })
或
axios({ //axios method: 'post', url: url, data: formData, }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
一定要设置了,才可以传参数成功,不然调用接口的时候是不会成功带参数的。
什么样子是成功带了参数呢,可以在相关页面点击F12查看,network,最下方会有Form Data,一栏,会展示所有传过去的参数。
最终代码如下:
import { Form, Button, Upload } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; const normFile = (e) => { console.log('Upload event:', e); if (Array.isArray(e)) { return e; } return e && e.fileList; }; const beforeUpload = ({fileList}) => { return false; } const Demo = () => { const onFinish = (values) => { console.log('Received values of form: ', values); }; return ( <Form name="validate_other" onFinish={onFinish} initialValues={{ 'input-number': 3, 'checkbox-group': ['A', 'B'], rate: 3.5, }} > <Form.Item name="upload" label="Upload" valuePropName="fileList" getValueFromEvent={normFile} > <Upload name="logo" beforeUpload={beforeUpload} > <Button icon={<UploadOutlined />}>Click to upload</Button> </Upload> </Form.Item> </Form> ); }; ReactDOM.render(<Demo />, mountNode);
到此这篇关于react使用antd的上传组件实现文件表单一起提交的文章就介绍到这了,更多相关react实现文件表单提交内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解,对本文感兴趣的朋友一起学习吧...2016-04-19
- 这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
antd Form组件方法getFieldsValue获取自定义组件的值操作
这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 这篇文章主要介绍了vue项目,代码提交至码云,iconfont的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-30
- 这篇文章主要介绍了angularjs $http实现form表单提交示例,非常具有实用价值,需要的朋友可以参考下 ...2017-06-15
- 这篇文章主要介绍了Antd的Table组件嵌套Table以及选择框联动操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25
- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了解决antd Form 表单校验方法无响应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-28
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 在html表单提交中method请求Get和Post区别其实很显示的,get提交会是url形式的并且数据量不能太多,而post数据是在浏览器url看不到的并且可以是大数据量而且get安全性非...2016-09-20
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
- 这篇文章主要介绍了react+ts实现简单jira项目,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-30
- 这篇文章主要介绍了react hooks入门详细教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06