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

目录

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.其他问题

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

相关推荐
兔兔爱学习兔兔爱学习1 小时前
Spring Al学习7:ImageModel
java·学习·spring
lang201509282 小时前
Spring远程调用与Web服务全解析
java·前端·spring
m0_564264183 小时前
IDEA DEBUG调试时如何获取 MyBatis-Plus 动态拼接的 SQL?
java·数据库·spring boot·sql·mybatis·debug·mybatis-plus
崎岖Qiu3 小时前
【设计模式笔记06】:单一职责原则
java·笔记·设计模式·单一职责原则
Hello.Reader3 小时前
Flink ExecutionConfig 实战并行度、序列化、对象重用与全局参数
java·大数据·flink
熊小猿4 小时前
在 Spring Boot 项目中使用分页插件的两种常见方式
java·spring boot·后端
paopaokaka_luck4 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
老华带你飞4 小时前
机器人信息|基于Springboot的机器人门户展示系统设计与实现(源码+数据库+文档)
java·数据库·spring boot·机器人·论文·毕设·机器人门户展示系统
notion20254 小时前
Adobe Lightroom Classic下载与安装教程(附安装包) 2025最新版详细图文安装教程
java·数据库·其他·adobe
rengang665 小时前
351-Spring AI Alibaba Dashscope 多模型示例
java·人工智能·spring·多模态·spring ai·ai应用编程