iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >antdupload上传组件如何获取服务端返回数据
  • 381
分享到

antdupload上传组件如何获取服务端返回数据

antdupload上传组件upload服务端返回数据antdupload 2023-02-12 15:02:36 381人浏览 八月长安
摘要

目录antd upload上传组件获取服务端返回数据我是这样解决的antd的upload上传组件uploading状态踩坑记说明总结antd upload上传组件获取服务端返回数据

antd upload上传组件获取服务端返回数据

项目中使用到antd upload组件上传的问题,按照官网示例,获取不到返回的值,后面上去GitHub找了找解决办法,

在upload返回值中,文件会有一个状态:status为done或者error的时候会返回一个response字段,这个字段里面会包含接口返回的数据,因此只需要坐下过滤就可以拿到值了

我是这样解决的

上面的判断可以过滤掉,哪个是判断多张上传出错的时候  给一个提示,因为antd upload组件多张上传 会走多次beforeupload方法,会提示多次。

回归正题,这样判断之后就可以拿到对应的数据,数据的处理就看自己的了,但是需要注意的就是如果是自己自定义的数据,数据中必须要有uid字段,不然会报错。

还有就是上传的时候会多次走upload方法,每一次都需要给你的filelist赋值,不然后续的upload方法就不会走,也就不会调取接口了.

antd的upload上传组件uploading状态踩坑记

说明

在使用Antd 的 Upload 组件 的onChange()方法中,打印fileList 中的文件状态status 一直是 uploading,无法拿到上传文件后服务端响应的内容,且组件下方不显示文件列表问题

以下是解决方法:

const Dragger = Upload.Dragger;
constructor(props) {
        super(props);
        this.state = {
            fileList: [],
        };
    }
<Dragger
                        listType={"picture"}
                        action={uploadUrl}
                        accept={acceptPictype}
                        disabled={upLoadDisabled}
                        beforeUpload={() => {
                        }}
                        fileList={isScanSuccess?[]:this.state.fileList}
                        onChange={
                            (data) => {
                                console.log(data)
                                const { fileList, file } = data;
                             		//自己的逻辑
                                    this.setState({ fileList: [...fileList] });//这段代码放在处理逻辑的最后面  
                                }                           
                            }
                        }
                    >
在github[解答](https://github.com/ant-design/ant-design/issues/2423)上此问题解答:

对于受控模式,你应该在 onChange 中始终 setState fileList,保证所有状态同步到 Upload 内。类似这里的写法:Http://ant.design/components/upload/#components-upload-demo-fileList

// Good  正确写法

onFileChange(fileList) {
  if ( ... ) {
    ...
  } else {
    ...
  }
  // always setState
  this.setState({ fileList: [...fileList] });
}
<Upload fileList={this.state.fileList} onChange={this.onFileChange} />
// bad 写法
onFileChange(fileList) {
  if ( ... ) {
    this.setState({ fileList: [...fileList] });
  } else {
    ...
  }
}
<Upload fileList={this.state.fileList} onChange={this.onFileChange} />
建议研习受控组件概念:https://facebook.github.io/React/docs/fORMs.html#controlled-components
注意需要克隆 fileList 以保障 Upload 能感知数组变化。
- this.setState({ fileList });
+ this.setState({ fileList: [...fileList] });

总结

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

--结束END--

本文标题: antdupload上传组件如何获取服务端返回数据

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

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

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

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

下载Word文档
猜你喜欢
  • antdupload上传组件如何获取服务端返回数据
    目录antd upload上传组件获取服务端返回数据我是这样解决的antd的upload上传组件uploading状态踩坑记说明总结antd upload上传组件获取服务端返回数据 ...
    99+
    2023-02-12
    antd upload上传组件 upload服务端返回数据 antd upload
  • antdupload上传如何获取文件宽高
    目录antd upload上传获取文件宽高antd上传文件限制大小 react Hooks总结antd upload上传获取文件宽高 项目新加的需求,需要判断上传图片的宽高,查了一下...
    99+
    2023-02-12
    antd upload上传 upload获取文件宽高 antd upload
  • sql如何获取存储过程返回数据
    这篇文章给大家分享的是有关sql如何获取存储过程返回数据的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。就是在执行存储后,获取存储过程执行的数据并作为其他应的二次使用,其实在代码中...
    99+
    2024-04-02
  • Ajax上传怎么实现根据服务器端返回数据进行js处理
    这篇文章主要介绍“Ajax上传怎么实现根据服务器端返回数据进行js处理”,在日常操作中,相信很多人在Ajax上传怎么实现根据服务器端返回数据进行js处理问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操...
    99+
    2024-04-02
  • ReactHook父组件如何获取子组件的数据/函数
    目录React Hook父组件获取子组件数据/函数子组件MyWorldMap父组件MyTripReact Hook父组件提交子组件form父组件子组件React Hook父组件获取子...
    99+
    2024-04-02
  • 如何在阿里云服务器上获取返现?
    阿里云服务器是一款高性能、稳定可靠的云服务器产品,深受广大企业和个人用户的喜爱。为了吸引更多的用户使用阿里云服务器,阿里云推出了返现活动,让用户在购买阿里云服务器时能够获得一定的返现。那么,如何在阿里云服务器上获取返现呢?本文将详细介绍如何...
    99+
    2023-11-04
    阿里 器上 如何在
  • springBoot之如何获取接口请求数据和返回数据实现日志
    目录一、获取接口请求的数据HttpServletRequestFilterRequestWrapperafterCompletion二、获取接口返回的数据HttpServletRes...
    99+
    2023-05-14
    springBoot接口 springBoot接口请求数据 springBoot返回数据日志
  • Ajax如何获取php返回json数据动态生成select下拉框
    这篇文章主要介绍Ajax如何获取php返回json数据动态生成select下拉框,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!功能:根据选择不同层次,在专业下拉框中动态生成对应分类的专业。HTML:<label...
    99+
    2023-06-08
  • 云服务器数据如何获取
    要获取云服务器上的数据,你可以使用以下方法之一:1. 使用远程登录协议(如SSH)连接到云服务器,并通过命令行或图形界面进行操作和获...
    99+
    2023-09-27
    云服务器
  • Shell $?如何获取函数返回值或者上一个命令的退出状态
    这篇文章主要介绍“Shell $如何获取函数返回值或者上一个命令的退出状态”,在日常操作中,相信很多人在Shell $如何获取函数返回值或者上一个命令的退出状态问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”S...
    99+
    2023-06-09
  • PHP 函数返回值的类型如何影响文件上传的安全性?
    php 函数返回值的类型在文件上传安全中发挥着至关重要的作用,包括:is_uploaded_file() 验证文件上传的合法性。filesize() 限制文件大小,防止恶意文件上传。pa...
    99+
    2024-04-15
    php 函数返回值
  • 阿里云服务器如何获取mysql数据库文件
    随着互联网的不断发展,数据的重要性越来越明显,MySQL数据库作为一种常用的数据存储和管理工具,被广泛应用在各种业务场景中。在阿里云服务器上,如何获取MySQL数据库文件呢?本文将为您详细介绍。 获取MySQL数据库文件的方法:使用MySQ...
    99+
    2023-11-02
    阿里 数据库文件 服务器
  • php如何获取云服务器的数据
    要获取云服务器的数据,可以使用以下几种方法:1. 使用SSH远程登录到云服务器,通过命令行工具访问服务器上的数据库或文件系统。例如,...
    99+
    2023-09-26
    php 云服务器
  • 如何将数据上传到云服务器
    将数据上传到云服务器可以通过以下步骤实现:1. 选择云服务提供商:选择一个可靠的云服务提供商。2. 创建云服务器实例:在选择的云服务...
    99+
    2023-09-27
    云服务器
  • linux下ftp如何上传数据到服务器
    这篇文章将为大家详细讲解有关linux下ftp如何上传数据到服务器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。LinuxftpFTP是ARPANet的标准文件传输协议,该网络就是现今Internet的前...
    99+
    2023-06-13
  • 获取云服务器数据失败如何解决
    要解决云服务器数据获取失败的问题,可以按照以下步骤进行尝试:1. 检查网络连接:确保云服务器与网络连接正常,可以尝试通过其他设备或网...
    99+
    2023-08-29
    云服务器
  • PHP+Socket如何实现客户端与服务端数据传输
    这篇文章主要介绍“PHP+Socket如何实现客户端与服务端数据传输”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“PHP+Socket如何实现客户端与服务端数据传输”文章能帮助大家解决问题。sock...
    99+
    2023-07-05
  • Pythonsocket如何实现服务端和客户端数据传输(TCP)
    目录socket服务端和客户端数据传输(TCP)socket服务端,客户端互相通信socket服务端和客户端数据传输(TCP) 服务器端: import socket #创建一个so...
    99+
    2024-04-02
  • 如何使用scp获取远程linux服务器上的文件
    这篇文章主要讲解了“如何使用scp获取远程linux服务器上的文件 ”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用scp获取远程linux服务器上的文件 ”吧!一、scp是什么?sc...
    99+
    2023-06-09
  • ajax如何处理服务器返回的三种数据类型
    这篇文章给大家分享的是有关ajax如何处理服务器返回的三种数据类型的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。其原理很简单,结构上基本不变,只是改变处理返回数据的方式.1.Te...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作