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 相关文章推荐
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
基于node.js制作简单爬虫教程
Jun 29 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
如何用threejs实现实时多边形折射
May 07 Javascript
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
React + Threejs + Swiper 实现全景图效果的完整代码
You might like
php结合飞信 免费天气预报短信
2009/05/07 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
Python自动重试HTTP连接装饰器
2015/04/28 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Python @property及getter setter原理详解
2020/03/31 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
中式结婚主持词
2014/03/14 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
医德医风学习心得体会
2016/01/25 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python