广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >antdupload控件的data参数使用
  • 804
分享到

antdupload控件的data参数使用

antdupload控件upload控件data参数antduploaddata参数 2023-02-12 15:02:36 804人浏览 独家记忆
摘要

目录antd upload控件的data参数经测试antd upload组件使用项目场景使用总结antd upload控件的data参数 通过data属性传递的参数,在后台可以通过r

antd upload控件的data参数

通过data属性传递的参数,在后台可以通过request获取到。

经测试

data可以是一个对象或者函数 ,

 <
 Upload 
 name=
 "file" 
 data=
 {this.
 state.
 inGoreFirst
 } 
 action=
 "/api/uploadFile" 
 onChange=
 {(
 info)
 =>this.
 handleUploadFileOnChange(
 info)
 } 
 >

如果是一个bool值,则request.fields获取到空{}

这样就可以

 <
 Upload 
 name=
 "file" 
 data=
 {this.
 state
 } 
 action=
 "/api/uploadFile" 
 onChange=
 {(
 info)
 =>this.
 handleUploadFileOnChange(
 info)
 } 
 >

如果不想把整个state返回服务器

可以用函数

 <
 Upload 
 name=
 "file" 
 data=
 {()
 =>this.
 handleUploadData()
 } 
 action=
 "/api/uploadFile" 
 onChange=
 {(
 info)
 =>this.
 handleUploadFileOnChange(
 info)
 } 
 >
  handleUploadData() 

   { 
 
  let 
  d={
  ingoreFirst:
  this.
  state.
  ingoreFirst,
  ingoreLast:
  this.
  state.
  ingoreLast} 
  return 
  d;

   }

antd upload组件使用

项目场景

  • 使用背景:上传图片给服务器并且需要额外的传递参数
  • 使用antd组件库,fORM表单下的upload组件

使用

图片上传自定义方法的使用,参数的上传

其中customRequest 作为自定义上传的方法与后端进行交互并可以传递额外的参数

beforeUpload 方法可以对上传的图片类型和大小做一下相对简单的前端校验

        <Upload
            name="uploadFile"
             listType="picture-card"
             className="avatar-uploader"
             showUploadList={false}
             fileList={fileList}
             customRequest={this.uploadHeadImg} //自定义上传的方法
             beforeUpload={this.beforeUpload}
             onChange={this.handleChange}
             >
        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
      </Upload>```
    uploadHeadImg =(option) => {
    const { pageTenantId } = this.state
    const formdata= new FormData();
    formdata.append('pageTenantId',pageTenantId);
    formdata.append('uploadFileName',option.file.name);
    formdata.append('uploadFile', option.file)
    axiOS.post('后端提供的接口',formdata,{headers:{
        "Content-Type": "application/x-www-form-urlencoded"
    }}).then(res=>{
        if(res.data.status==0) {
            option.onSuccess(res.data.data.returnParams.fileUrl)
            this.setState({
                logoUrl: res.data.data.returnParams.fileUrl
            })
        }
    }
  )
 }

onchange方法可以通过上传的状态对文件进行一些判断

     handleChange = async(info) => {
        if (info.file.status === 'uploading') {
          this.setState({ loading: true });
          return;
        }
        if (info.file.status === 'done') {
          // Get this url from response in real world.
           await this.getBase64(info.file.originFileObj, imageUrl =>
            this.setState({
              imageUrl,
              loading: false,
              fileList:info.fileList,
            }), 
            );
        }
      };

beforeUpload的具体使用根据要求进行判断


    beforeUpload(file) {
        // 只允许图片的jpeg和png类型
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('图片类型只能为JPEG/PNG!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('图片不能大于2MB!');
        }
        return isJpgOrPng && isLt2M;
        }

在form表单中要使用getValueFromEvent对上传的文件数据赋值具体使用

在这里插入图片描述

normFile 方法把文件return出来

    normFile = (e) => {
        this.setState({
            uploadFileName:e.file.name
        })
        if (Array.isArray(e)) {
          return e;
        }
        return e && e.fileList;
      };

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: antdupload控件的data参数使用

本文链接: https://www.lsjlt.com/news/195716.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • antdupload控件的data参数使用
    目录antd upload控件的data参数经测试antd upload组件使用项目场景使用总结antd upload控件的data参数 通过data属性传递的参数,在后台可以通过r...
    99+
    2023-02-12
    antd upload控件 upload控件data参数 antd upload data参数
  • VB.NET如何使用Data Report控件
    这篇文章将为大家详细讲解有关VB.NET如何使用Data Report控件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.VB.NET Data Report控件使用方法由于是VB自带的控件,所以使用相...
    99+
    2023-06-17
  • requests.post()方法中data和json参数的使用
    目录requests.post()中data和json参数json和dictrequests.post()其它post请求中json和data的区别requests.post()中d...
    99+
    2022-11-13
  • C#中的multipart/form-data提交文件和参数
    目录C# multipart/form-data提交文件和参数C# POST multipart/form-data案例C# multipart/form-data提交文件和参数 ...
    99+
    2022-11-13
  • Pythonrequests.post()方法中data和json参数的使用方法
    目录json和dictrequests.post()post请求中json和data的区别json和dict python中的dict类型要转换为json格式的数据需要用到json库...
    99+
    2022-11-11
  • Spring Data JPA中 in 条件参数的传递方式
    关于Spring Data JPA中自定义sql 条件的 in参数记录 此文做一个记录,以便以后观看,也希望正在遇到同样问题的同学能有所启发,如果你有更好的方法,或我的做法有问题,请...
    99+
    2022-11-12
  • 【使用multipart/form-data方式传递MultipartFile参数,实现服务间文件的传递】
    目录 一、代码实现二、MultipartFile工具类三、HttpClient使用四、参考链接 一、代码实现 1、A服务接收前端上传文件并发送至B服务 引入依赖 org.apa...
    99+
    2023-09-06
    前端 java
  • Spring Data JPA中in条件参数的传递方式有哪些
    这篇文章主要介绍Spring Data JPA中in条件参数的传递方式有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!关于Spring Data JPA中自定义sql 条件的 in参数记录此文做一个记录,以便以后...
    99+
    2023-06-15
  • 怎么使用springboot获取控制器参数
    小编给大家分享一下怎么使用springboot获取控制器参数,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如题,这里介绍springboot 获取控制器参数有四种...
    99+
    2023-06-22
  • Vue中data传递函数、props接收函数及slot传参的使用及说明
    目录1. data作为转换层2. props接收传递过来的函数并把处理结果传回父组件3. 父组件接收子组件传递回来的值1. data作为转换层 1.1 如下图中的代码,data作为转...
    99+
    2022-11-13
    Vue中data传递函数 Vue中props接收函数 Vue中slot传参
  • Java请求调用参数格式为form-data类型的接口
    接口参数使用postman调用如图所示,只能使用form-data格式调用 使用java代码发送http请求实现此种方式的接口调用 public static String doPostForm(String url, HashMap m...
    99+
    2023-08-20
    java 开发语言
  • 使用shell传参并将参数传递给sql文件
    本篇文章为大家展示了使用shell传参并将参数传递给sql文件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。如下所示:调用代码:   sh /tmp/t.sh 20160808&...
    99+
    2023-06-09
  • records_per_block参数的使用
    1、BLOCK是数据库中的最小存储和处理单位,包含块本身的头信息数据或PL/SQL代码。RECORDS_PER_BLOCK参数用于设定每个BLOCK中记录数的最大值,其先找到当前表所有BLOCK中容纳的最大...
    99+
    2022-10-18
  • Oracle如何使用Optimizer_mode参数来控制优化器
    这篇文章主要介绍了Oracle如何使用Optimizer_mode参数来控制优化器,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Oracle...
    99+
    2022-10-19
  • 使用springboot获取控制器参数的几种方法小结
    目录无注解下获取参数使用@RequestParam获取参数接收前端传递的数组通过URL传递参数如题,这里介绍springboot 获取控制器参数有四种方式 1、无注解下获取参数 2、...
    99+
    2022-11-12
  • axios利用params/data发送参数给springboot controlle的正确获取方式
    目录引言问题分析:解决上述解决方案:前端传递json对象到springboot web 程序总结引言 今天有人遇到接口调用不通的情况,粗略看了一下是axios跨域请求引起了。找到问题...
    99+
    2022-11-13
  • 如何使用VB.NET控件数组
    这篇文章主要介绍了如何使用VB.NET控件数组,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、关于VB.NET控件数组控件数组”是VB6中一项简单而实用的技术,通过对控件的...
    99+
    2023-06-17
  • PHP:laravel中间件和控制器的请求参数传递与获取
    目录 1、中间件和控制器测试2、安全隐患3、支持的传参方式4、总结5、一种更为安全的做法 接口开发中,通常我们需要在中间件里边做一些全局性的前置判断,获取请求中的公共参数,然后传递给...
    99+
    2023-09-10
    php laravel 开发语言
  • 使用springmvc参数接收boolean类型参数的问题
    目录springmvc参数接收boolean类型参数如何接收以is开头的boolean类型的参数开发环境问题小结一下springmvc参数接收boolean类型参数 在开发项目过程中...
    99+
    2022-11-13
  • 如何使用关于C#事件处理函数中的参数
    本篇内容介绍了“如何使用关于C#事件处理函数中的参数”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!是事件源,表示触发事件的那个组件如(but...
    99+
    2023-06-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作