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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
React + Threejs + Swiper 实现全景图效果的完整代码
You might like
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
资料注册后发信小技巧
2006/10/09 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
CI框架Session.php源码分析
2014/11/03 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
用JS实现的一个include函数
2007/07/21 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
JS实现小米轮播图
2020/09/21 Javascript
详解python之多进程和进程池(Processing库)
2017/06/09 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
python调用java的jar包方法
2018/12/15 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
农行实习自我鉴定
2013/09/22 职场文书
库房管理员岗位职责
2014/03/09 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
学术会议开幕词
2016/03/03 职场文书