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 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 Javascript
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
React + Threejs + Swiper 实现全景图效果的完整代码
You might like
php 启动时报错的简单解决方法
2014/01/27 PHP
php读取3389的脚本
2014/05/06 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
canvas实现刮刮卡效果
2017/03/14 Javascript
layui文件上传实现代码
2017/05/20 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
python的中异常处理机制
2018/08/30 Python
Python使用gRPC传输协议教程
2018/10/16 Python
python模糊图片过滤的方法
2018/12/14 Python
python redis 删除key脚本的实例
2019/02/19 Python
python三引号输出方法
2019/02/27 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
Python坐标线性插值应用实现
2019/11/13 Python
Python pickle模块实现对象序列化
2019/11/22 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
后勤部长岗位职责
2013/12/14 职场文书
司机辞职报告范文
2014/01/20 职场文书
事业单位鉴定材料
2014/05/25 职场文书
走群众路线剖析材料
2014/10/09 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
社区母亲节活动总结
2015/02/10 职场文书