Antd 的 Upload 上传组件 uploading 状态踩坑记

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

const Dragger = Upload.Dragger;constructor(props) {super(props);this.state = {fileList: [],};}
<DraggerlistType={"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 setStatethis.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] });

Antd 的 Upload 上传组件 uploading 状态踩坑记相关推荐

Element中Upload上传组件的http-request方法
刚开始接触vue,新框架是vue+Element.其中写到上传组件的时候卡住了.问题详细: Upload上传组件中的action是必选参数,但是调后台接口的时候需要手动加参数和token,比较麻烦. ...
我是如何设计 Upload 上传组件的
Upload 组件设计的目标是解决用户上传文件的便利性,但是中后台 Upload 组件的场景是多种多样的,所以可扩展能力是 Upload 组件不可忽视的另一方面. 同样为了大家能够更加容易的理解,我会 ...
前端学习（2011）vue之电商管理系统电商系统之初步使用upload上传组件
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
element-ui upload 上传组件附带额外参数进行上传（表单形式，多个参数）
之前一直使用upload组件单个上传文件,最近遇到需要上传表单字段,表单中有多个参数下图是接口要求: 官网上传组件中提供了响应的功能实现,但是demo中未演示,不注意看文档参数的话,可能会不知道这个 ...
antd vue3 图片上传组件扩展，支持多图上传图片拖拽排序等
组件涉及到 vue3.2.vite.Ant Design Vue 3.2.16.Windi CSS样式库.vuedraggable-es拖拽库等组件功能图片拖拽多图上传自定义图片加载样式自定 ...
页面中使用多个element-ui upload上传组件时绑定对应元素
elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢? ...
LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）
1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件. HTML代码: <input type='button' id='selectFile' value='选择文件'> &l ...
uniapp - 全平台兼容的 “多图上传“ 功能，搭配 uview 组件库中的 upload 上传组件（附带详细的示例源码及注释，可直接复制使用或简单修改）
效果图使用 uniapp 开发,多平台全端兼容的多图上传功能,支持限制个数及移除等. 组件库使用的是 uview 框架,上传组件基于 Upload组件,功能完美无bug. 准备阶段 Upload组件 ...
前端学习（2695）：重读vue电商网站16之Upload 上传组件
通过点击或者拖拽上传文件 Js  <el-upload:action="uploadURL":on-pre ...

Antd 的 Upload 上传组件 uploading 状态踩坑记

Antd 的 Upload 上传组件 uploading 状态踩坑记相关推荐

最新文章

热门文章