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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
React + Threejs + Swiper 实现全景图效果的完整代码
You might like
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
javascript的BOM汇总
2015/07/16 Javascript
jquery选择器简述
2015/08/31 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
js 作用域和变量详解
2017/02/16 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python函数式编程指南(二):从函数开始
2015/06/24 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
陈欧的广告词
2014/03/18 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
市场营销策划方案
2014/06/11 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技