react使用antd的上传组件实现文件表单一起提交功能(完整代码)


Posted in Javascript onJune 29, 2021

最近在刚刚开始使用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时就会停止文件的上传。

react使用antd的上传组件实现文件表单一起提交功能(完整代码)

react使用antd的上传组件实现文件表单一起提交功能(完整代码)

以上就可以停止文件的自动上传。接下来,我们考虑怎么把上传的文件获取并存在传给后端的参数中。

react使用antd的上传组件实现文件表单一起提交功能(完整代码)

这部分代码就是上传代码的方法,因为我们需要上传文件和表单一起提交。所以我们在这个方法里进行一些修改,把文件存在formData对象里。这里先说明一下formData对象,主要就是用来传文件给后端用的。

react使用antd的上传组件实现文件表单一起提交功能(完整代码)

先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实现文件表单提交内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
javascript的内存管理详解
Aug 07 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
vue配置接口域名方法总结
May 12 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
React + Threejs + Swiper 实现全景图效果的完整代码
You might like
一个简单计数器的源代码
2006/10/09 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
利用php输出不同的心形图案
2016/04/22 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
在Python的Django框架中包装视图函数
2015/07/20 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
python获取代码运行时间的实例代码
2018/06/11 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
在python里面运用多继承方法详解
2019/07/01 Python
Django model update的多种用法介绍
2020/03/28 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
集体婚礼策划方案
2014/02/22 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
nginx容器方式反向代理实战
2022/04/18 Servers
Win11软件图标固定到任务栏
2022/04/19 数码科技