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

news2024/11/19 11:27:41

目录

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1478711.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Maven下载、安装、配置教程

maven是一个项目管理的工具,maven自身是纯java开发的,可以使用maven对java项目进行构建、依赖管理。 通常我们靠手动下载jar包引入项目中是非常浪费时间的,我们可以通过maven工具帮我们导入jar包提高开发效率。 第一步:下载Mave…

【QT+QGIS跨平台编译】之五十五:【QGIS_CORE跨平台编译】—【qgsmeshcalcparser.cpp生成】

文章目录 一、Bison二、生成来源三、构建过程一、Bison GNU Bison 是一个通用的解析器生成器,它可以将注释的无上下文语法转换为使用 LALR (1) 解析表的确定性 LR 或广义 LR (GLR) 解析器。Bison 还可以生成 IELR (1) 或规范 LR (1) 解析表。一旦您熟练使用 Bison,您可以使用…

C++设计模式——抽象工厂模式

文章目录 抽象工厂模式的主要组成部分抽象工厂模式的一个典型例子抽象工厂模式用于其他场景抽象工厂模式与其他设计模式结合使用 C 中的抽象工厂模式是一种创建型设计模式,它主要用于处理对象家族的创建,这些对象之间可能存在一定的关联关系或属于相同的…

springboot227旅游管理系统

springboot旅游管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本旅游管理系统就是在这样的大环境下诞生,其可以帮助使用者在…

C++ deque详解以及容器适配器

目录 1.容器适配器 2.deque的使用 2.1deque的介绍 2.2deque的缺陷 2.3deque作为stack和queue的可行性 2.4 deque类的使用 2.4.1deque的构造函数 2.4.2deque容量操作 2.4.3deque赋值,插入 1.容器适配器 适配器是一种设计模式(设计模式是一套被人…

STL常见容器(stack、queue容器)---C++

STL常见容器目录: 4.stack容器4.1 stack 基本概念4.2 stack 常用接口 5.queue容器5.1 queue常用接口5.2 queue常用接口 4.stack容器 4.1 stack 基本概念 概念: stack是一种先进后出(First In Last Out,FILO)的数据结构,它只有一个出口. 注意…

重推请求之curl和fiddler

在实际的项目中会有出现问题,想重现的场景,比较重新调用一个服务,那么如何进行快速的重推请求呢,记录下来,方便备查。 主要有curl和fiddler两种方式,下面详细说。 方式一、curl 命令 curl 是一个利用URL规…

MySQL:索引有哪些(清晰明了)

一提到索引,可能就会想到B树索引、Hash索引、聚簇索引、主键索引、唯一索引、联合索引等等,但这些名词并不能混为一谈,他们有重复的部分,是从不同方面给索引取的名字。 从数据结构上来讲:B树索引、Hash索引、Full-text…

Spring注解之处理常见的 HTTP 请求

5 种常见的请求类型: GET :请求从服务器获取特定资源。举个例子:GET /users(获取所有学生)POST :在服务器上创建一个新的资源。举个例子:POST /users(创建学生)PUT :更新…

总结成果,擘画蓝图 | 易我科技召开2023年度总结暨2024年规划大会

2024年2月1日下午,易我科技举行了2023年度总结暨2024年规划大会。 01 首先,易我科技总经理万建华对2023年度整体工作进行了总结,对取得的经营成果给予了充分肯定。 ▲ 万总公布2023年经营成果 在肯定成绩的同时,也必须正视存在…

Leetcode : 移动零

给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 思路:遍历数组元素,判定为0,则采用erase从数组删除&…

P沟道与N沟道MOSFET的基本概念

N沟道与P沟道MOSFET基本原理与区别 学习MOSFET时的简单笔记作为个人总结,仅供学习参考,实际电路设计请直接略过!!! 文章目录 N沟道与P沟道MOSFET基本原理与区别前言一、MOSFET ?二、N沟道MOS管原理三、P沟…

TCP/UDP模型:2024/2/29

作业1&#xff1a;TCP模型 服务器端&#xff1a; #include <myhead.h> #define SER_IP "192.168.199.129" #define SER_PORT 8899int main(int argc, const char *argv[]) {//1.创建用于连接的套接字文件int sfdsocket(AF_INET,SOCK_STREAM,0);if(sfd-1){per…

【Javascript编程实操02】1、判断一个年份是闰年还是平年 2、找到三个数中最小的数

目录 前言 1、判断一个年份是闰年还是平年 原理&#xff1a; 代码&#xff1a; 实现效果&#xff1a; 2、找到三个数中最小的数 流程图&#xff1a; 代码&#xff1a; 实现效果&#xff1a; 总结 前言 本次继续针对Javascript阶段的if...else...的实操练习&#xff0…

【MySQL】SQL 入门和 DDL

1. 通用语法 SQL语句可以单行或多行书写&#xff0c;以分号结尾SQL语句可以使用空格/缩进来增强语句的可读性MySQL数据库的SQL语句不区分大小写&#xff0c;关键字建议使用大写注释&#xff1a; 单行注释&#xff1a;-- 注释内容 或 # 注释内容多行注释&#xff1a;/* 注释内容…

探索JavaScript中的构造函数,巩固你的JavaScript基础

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【Unity实战】UGUI和Z轴排序那点事儿

如果读者是从Unity 4.x时代过来的&#xff0c;可能都用过NGUI这个插件&#xff08;后来也是土匪成了正规军&#xff09;&#xff0c;NGUI一大特点是可以靠transform位移的Z值进行遮挡排序&#xff0c;然而这个事情在UGUI成了难题&#xff08;Sorting Layer、Inspector顺序等因素…

波奇学Linux:共享内存

进程通信的前提&#xff1a;不同的进程看到同一份的资源 直接原理:同一块物理内存映射到不同进程的共享区 共享内存拆解&#xff1a; 1.申请内存&#xff0c;通过页表映射到进程地址空间 2.返回首地址&#xff0c;便于进程利用 3.释放共享内存&#xff0c;去关联 4.内存的申请…

如何使用Docker部署IT-Tools并结合内网穿透实现公网访问本地工具箱服务

作为程序员&#xff0c;在日常工作中&#xff0c;需要借助一些工具来提高我们工作效率&#xff0c;IT-Tools是为开发人员度身打造的一套便捷在线工具。它提供全面功能&#xff0c;使开发者能以更高效方式完成任务。经由IT-Tools&#xff0c;开发人员能轻松应对各类技术挑战&…

数据结构--树的遍历

数据结构--树的遍历 1. 前序中序后序遍历2. 前序中序后序遍历代码 1. 前序中序后序遍历 2. 前序中序后序遍历代码 /** public class TreeNode {int val 0;TreeNode left null;TreeNode right null;public TreeNode(int val) {this.val val;}} */// 前序遍历顺序&#xff1…