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

 更新时间:2023年02月12日 13:44:51   作者:wo_dxj  
这篇文章主要介绍了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] });

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue调用swiper插件步骤教程(最易理解且详细)

    vue调用swiper插件步骤教程(最易理解且详细)

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理,下面这篇文章主要给大家介绍了关于vue调用swiper插件的相关资料,需要的朋友可以参考下
    2023-04-04
  • Vue框架里使用Swiper的方法示例

    Vue框架里使用Swiper的方法示例

    这篇文章主要介绍了Vue框架里使用Swiper的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 详解Vue3的组合式API中如何使用computed属性

    详解Vue3的组合式API中如何使用computed属性

    在Vue中,computed属性是一种计算属性,它的值是根据其他数据的值动态计算出来的,下面小编主要来和大家聊聊Vue 3的组合式API中如何使用computed属性,感兴趣的小伙伴快跟随小编一起了解一下吧
    2023-06-06
  • Vue2几种常见开局方式详解

    Vue2几种常见开局方式详解

    这篇文章主要为大家详细介绍了Vue2几种常见开局方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • vue实现离线地图+leaflet+高德瓦片的详细代码

    vue实现离线地图+leaflet+高德瓦片的详细代码

    这篇文章主要给大家介绍了关于vue实现离线地图+leaflet+高德瓦片的详细代码,Vue Leaflet是一种结合了Vue框架和Leaflet库的前端技术,用于展示和操作天地图,需要的朋友可以参考下
    2023-10-10
  • vue3+ts前端封装EventSource并在请求头添加token的方法

    vue3+ts前端封装EventSource并在请求头添加token的方法

    这篇文章主要介绍了vue3+ts前端封装EventSource并在请求头添加token,本文将介绍如何使用 event-source-polyfill 来解决这个问题,需要的朋友可以参考下
    2024-12-12
  • Vue 2.0中生命周期与钩子函数的一些理解

    Vue 2.0中生命周期与钩子函数的一些理解

    这篇文章主要给大家介绍了关于Vue 2.0中生命周期与钩子函数的相关资料,对大家学习或者使用vue2.0具有一定的参考学习价值,需要的朋友们下面随小编一起来看看吧。
    2017-05-05
  • Vue项目打包后可修改基础接口地址配置的具体操作

    Vue项目打包后可修改基础接口地址配置的具体操作

    vue项目打包过后发现地址错了或者发布到别的服务器发现请求的地址不对,每次都要去重新打包,太浪费时间,下面这篇文章主要给大家介绍了关于Vue项目打包后可修改基础接口地址配置的具体操作,需要的朋友可以参考下
    2022-08-08
  • vue实现简单滑块验证

    vue实现简单滑块验证

    这篇文章主要为大家详细介绍了vue实现简单滑块验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue实现导航栏的显示开关控制

    Vue实现导航栏的显示开关控制

    今天小编就为大家分享一篇Vue实现导航栏的显示开关控制,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论