文件上传之后再次打开,文件依然存在

目录

1.上传说明

2.问题1

3.问题2

4.其他问题


1.上传说明

文件上传使用了单独的组件,使用对话框内嵌套上传组件的方式,在主画面中点击导入按钮,弹出对话框。

2.问题1

问题:

①上传文件后,点击遮罩层取消或者点击取消按钮后,再次打开对话框,之前上传的文件依然存在。

②文件上传成功后,关闭对话框,再次打开对话框后,之前上传的文件依然存在。

原因:

通过对话框的是否可见的属性来控制对话框的显示和隐藏,点击取消按钮,对话框设置为不可见,点击导入按钮,对话框设置为可见。画面没有进行刷新时,控制对话框的显示和隐藏时,对话框及上传组件并没有重新加载,导致之前的文件内容存在。

解决方案:

①开启对话框的关闭时是否卸载节点的属性,开启此属性后,当对话框关闭时,会销毁对话框中的所有元素,这样下次打开后对话框内的元素会重新加载,就不会保留之前的内容。

所有的前端框架的对话框,抽屉之类的组件都有此属性。比如下面两个前端框架。

arco design:

element ui

② 可以在上传组件设置key属性,或在上传组件外面套一层div,设置key属性,

初始内容设置为Math.random(),在取消事件和上传完成事件中,将key的内容设置为Math.random(),这样再次打开对话框,发现key的内容不一致,会重新渲染上传组件,这样就不会保留之前的内容了。

参照:vue组件的重新渲染的问题-CSDN博客

3.问题2

问题:文件上传成功之后,再次打开对话框,不上传文件点击确定按钮,发现会上传上一次的文件内容

原因:当使用自定义上传的方式,上传之后,将文件信息存储在变量中,点击确定后,构建formdata对象,发起请求,请求完成后,没有对存储文件信息的变量进行清空,导致下次打开时即使没有上传文件,依旧可以读取到文件。

解决方案:打开上传对话框时,清空存储文件信息的变量。或者在上传成功后,清空存储文件信息的变量。

4.其他问题

文件需要追加是否为空的校验,没有上传文件,点击确定按钮进行校验,为空报错。

相关推荐
风铃儿~15 分钟前
Spring AI 入门:Java 开发者的生成式 AI 实践之路
java·人工智能·spring
斯普信专业组20 分钟前
Tomcat全方位监控实施方案指南
java·tomcat
忆雾屿31 分钟前
云原生时代 Kafka 深度实践:06原理剖析与源码解读
java·后端·云原生·kafka
武昌库里写JAVA44 分钟前
iview Switch Tabs TabPane 使用提示Maximum call stack size exceeded堆栈溢出
java·开发语言·spring boot·学习·课程设计
gaoliheng0061 小时前
Redis看门狗机制
java·数据库·redis
我是唐青枫1 小时前
.NET AOT 详解
java·服务器·.net
Su米苏1 小时前
Axios请求超时重发机制
java
本郡主是喵3 小时前
并发编程 - go版
java·服务器·开发语言
南风lof3 小时前
源码赏析:Java线程池中的那些细节
java·源码阅读