antd踩坑记录之upload上传
代码
- 页面展示代码
<Modalvisible={isShowUploadModal} //弹框是否显示onOk={this.handleCloseModel} // 点击确定时的操作onCancel={this.handleCloseModel} //点击取消时的操作title="文件上传"// 关闭时销毁子元素,这个很有用,相当于关闭的时候结束了组件的生命周期destroyOnClose={true}
><Uploadref={this.modalRef} // 用到ref实现后面的弹框颜色控制action={apis.DeviceManagement} // 上传的地址headers={{ Authorization: token } // 可以在header里加上token}maxCount={1} // 最大上传数量,控制为1accept=".xls, .xlsx" //upload文件接收什么样的文件beforeUpload={this.handlerBeforeUpload} // 上传前的操作记录onChange={this.statusChange} //上传后的操作记录><Button type="primary">点击上传</Button></Upload>
</Modal>
- 事件处理代码
// 文件上传的拦截handlerBeforeUpload = (file, fileList) => {const { size } = fileif (size / 1024 / 1024 > 10) {message.error("文件大小不能超过10兆")return Upload.LIST_IGNORE}this.setState({uploadLoading: true})return true}
//onChange上传文件状态变化,有三个状态status:uploading done error。
//beforeUpload拦截的文件没有这些status
// 所以在onChange中将拦截的文件进行处理,一般来说,上传的文件要么走到error,
//要么走到done,进入error状态,代表接口报错了。走到done状态代表了上传成功状态。statusChange = (res) => {const { file, fileList } = resif (file.status == 'error') {message.error(file?.response?.msg||"文件上传失败,请检查一下数据是否有错")}if (file.status == 'done') {// 上传成功后重新获取数据if (file.response.code === 100) {// 通过ref将upload组件获取到后,调用上传失败的函数,实现在已经done后还能触//发向error状态时的字体颜色为红色状态this.modalRef.current.onError("文件上传失败", file.response, file)}if (file.response.code === 200) {message.success(file.response?.msg || "文件上传成功")// 上传成功后重新获取数据// this.getDeviceList()}}}
问题
- 知识点
onChange上传文件状态变化,有三个status:uploading, done ,error。
beforeUpload拦截的文件是没有这些status的,所以在onChange中将拦截的文件进行处理,一般来说,上传的文件要么走到error,要么走到done,进入error状态,代表接口报错了。走到done状态代表了上传成功状态。 - 问题
因为上传的是excel文件,用后端对接接口返回的状态码来判断是否上传成功,还有显示后端的提示代码。所以这个时候已经走到done了,能拿到了状态和后端返回的response。但是后面遇到的问题是要在done这个状态里面判断是否上传成功,没有成功就让上传的文件变为红色,类似于下图
想到的解决办法就是 - 1,要么利用变量控制css属性来实现
实现起来有些问题,虽然可以通过浏览器元素审查来找到upload对应的类名进行修改。但是这样写的话可能就会通过操作dom元素来实现style的添加或删除颜色,与react的虚拟dom设计不符合,所以放弃 - 2,通过upload自己来触发让他变红的事件(onError)
react的ref属性可以获取到想要获取的元素。通过ref拿到后upload的属性后进行Onerror的调用this.modalRef.current.onError("文件上传失败", file.response, file)
,file.response
就是后台返回的数据,file
是上传的文件。
遇到的坑
- 场景
因为upload嵌套在modal弹框里面,所以在点击弹框关闭时要将upload里面上传的文件销毁,或者说是清空upload中的fileList - 问题
将fileList变为受控组件后,onChange事件拿到的状态一直是uploading
<Uploadref={this.modalRef}action={apis.DeviceManagement}headers={{ Authorization: Token.token }}fileList={fileList} // 将fileList变为受控组件maxCount={1}accept=".xls, .xlsx"beforeUpload={this.handlerBeforeUpload}onChange={this.statusChange}></Upload>
查阅了一下antd官网
为何 fileList 受控时,上传不在列表中的文件不会触发 onChange 后续的 status 更新 事件?
onChange 事件仅会作用于在列表中的文件,因而 fileList 不存在对应文件时后续事件 会被忽略
- 解决方案
最简方案,那么就在fileList不写在upload中,还是非受控的。modal关闭时销毁其子组件,刚好modal进行过封装destroyOnClose
={true},当弹框关闭时可以销毁组件。
destroyOnClose关闭时销毁 Modal 里的子元素
antd踩坑记录之upload上传相关推荐
- pypi-server搭建,pypi-server踩坑,使用twine上传
pypi-server搭建,pypi-server踩坑,使用twine上传 搭建参考:使用pypi-server搭建简单的PyPI源 上传无需密码,开启服务命令 pypi-server -P . -a ...
- Antd Upload 和 Antd Form 结合的踩坑记录
今天弄了半天这个上传组件结合表单组件的问题. 这个上传文件列表,如果是当前正在修改或者上传成功,当然是可以正常工作的,但是想要增加一个功能: 下次打开 Modal 时,表单字段中的上传文件字段,可以默 ...
- sonar覆盖率怎么统计的_实战|Java 测试覆盖率 Jacoco插桩的不同形式总结和踩坑记录(上)...
本文为霍格沃兹测试学院优秀学员关于 Jacoco 的小结和踩坑记录.测试开发进阶学习,文末加群. 一.概述 测试覆盖率是老生常谈的话题.因为我测试理论基础不是很好,这里就不提需求.覆盖率等内容,直奔主 ...
- Java 线上惨痛踩坑记录,你也一定遇到过
线上问题年年有,今年特别多.记几次线上惨痛的踩坑记录,希望大家以史为鉴. 1. 包装类型自动解箱导致空指针异常 public int getId() { Integer id = null; retu ...
- Java线上惨痛踩坑记录,你也一定遇到过
线上问题年年有,今年特别多.记几次线上惨痛的踩坑记录,希望大家以史为鉴. 1. 包装类型自动解箱导致空指针异常 public int getId() {Integer id = null;return ...
- 【Antd Design Upload】 antd Upload 上传时只有Uploading状态,无法获取返回的数据
问题:antd Upload 上传时只触发Uploading状态,无法获取服务器返回的response,根据控制台的结果发现只有一种Uploading,上传图片时只触发了一次. 根据官网可以知道.上传 ...
- 新手可直接复现:Duan版本CenterNet在2080Ti上训练自己的数据集——踩坑记录
实验室换了GPU,记录下centernet在新电脑上的配置过程,如果对下面很多不理解先阅读我以前的这篇博客即可初学者复现CornerNet:详细指导零基础在Ubuntu系统运行该代码并完全理解论文思路 ...
- Smb协议实现内网共享目录文件处理及踩坑记录
Smb协议实现内网共享目录文件处理及踩坑记录 一.业务场景 公司内网环境,有部分比较古老的业务数据保存在一台windows服务器的共享目录里面.现在需要操作这个windows服务器的共享目录来上传下载 ...
- 数据标注平台(CVAT)安装及踩坑记录
目录 一.CVAT安装 step1 安装docker step2 获取权限 step3 获取权限 step4 克隆cvat源代码 step5 构建docker镜像 step6 运行Docker容器这一 ...
最新文章
- [转载]在线文档预览方案-Office Web Apps
- 使用 VNC 无屏幕远程连接树莓派
- 路由器是如何实现数据包的传送?—Vecloud微云
- 映射递归循环-约瑟夫环问题递归解法的一点理解
- 朝花夕拾——finally/final/finalize拨云雾见青天
- 第28课 叮叮当当 《小学生C++趣味编程》
- Bookmarks(2005-4-23)
- AE遮罩路径扭曲插件BOA Boa for Macv1.3.1破解版
- python——问题解决:读取excel文件字符串,写入txt时乱码
- 为什么论文查重建议用word?
- 测试用例(分析法——详细场景法)
- 十位语言大师给你的英语学习建议
- 创业冲突的五种解决方法是_避免创业合伙人之间发生冲突的四种方法
- 铁路一线工人春运备战实录:深夜里的“钢铁工匠”
- html判定会员,会员详情查询.html
- Android(permission)常用权限
- w7计算机防火墙无法更改,win7系统提示防火墙无法更改某些设置错误代码0x8007437的原因及四种解决方法...
- 如何理解一台服务器可以绑定多个ip,一个ip可以绑定多个域名
- java8 .map是什么意思_JDK8 stream().map() 作用
- OSPF ISDN DCC