当前位置: 首页 > news >正文

vue Element Ui Upload 上传 点击一个按钮,选择多个文件后直接上传,使用防抖解决多次上传的问题。

问题:

在使用Element Ui  Upload 上传文件时,选择多个文件上传时,on-change事件会一个一个返回上传的文件,导致前端不知道什么时候可以拿到全部上传的文件,再一起调后台接口。

解决方法:

上传文件后,自动把文件传给后台,这里做了一个防抖,等待500ms后在传给后台

代码实现:

 <el-upload class="upload-demo" ref="enclosureUpload" accept=".docx" :file-list="fileList" action multiple  :limit="7"

        :show-file-list="false" :auto-upload="false" :on-change="handleFileChange"

        :on-exceed="handleExceed" >

        <el-button type="info" size="small" plain round >

          上传

      </el-button>

  </el-upload>

 

// 文件超出个数限制时的钩子

    handleExceed (files, fileList) {

      this.$message.warning(`限制选择7个文件,本次选择了 ${files.length} 个文件`);

    },

    // 上传附件 过滤重复

    filterRepetition (arr) {

      let arr1 = []; //存id

      let newArr = []; //存新数组

      for (let i in arr) {

        if (arr1.indexOf(arr[i].name) == -1) {

          arr1.push(arr[i].name);

          newArr.push(arr[i]);

        }

      }

      return newArr;

    },

    // 修改 存放要上传的文件列表

    handleFileChange (file, fileList) {

      let arr = this.filterRepetition(fileList);

      if (arr.length !== fileList.length) {

        this.$message("上传重复文件,已过滤重复文件");

      }

      this.fileList = arr;

      // 上传文件后,自动把文件传给后台,这里做了一个防抖,等待500ms后在传给后台

      this.debounce(this.submitUpload, 500);

    },

    // element上传多个文件时,会把每个文件做个单独请求

    // 这里的方法是请求最后一次

    debounce (fn, waits) {

      if (this.timer) {

        clearTimeout(this.timer);

        this.timer = null;

      }

      this.timer = setTimeout(() => {

        fn.apply(this, arguments); // 把参数传进去

      }, waits);

    },

    // 确定

    async submitUpload () {

      if (this.fileList.length === 0) {

        this.$message.success("请上传文件");

        return;

      }

      let formData = new FormData(); //  用FormData存放上传文件

      this.fileList.forEach((file) => {

        formData.append("file", file.raw);

      });

      // 确定上传 把在上传列表里的文件 合并到formData里面传给后台

      let res = await importXlsx(formData);

      this.fileList = []

      this.$message.success('上传成功')

    }

相关文章:

vue Element Ui Upload 上传 点击一个按钮,选择多个文件后直接上传,使用防抖解决多次上传的问题。

问题&#xff1a; 在使用Element Ui Upload 上传文件时&#xff0c;选择多个文件上传时&#xff0c;on-change事件会一个一个返回上传的文件&#xff0c;导致前端不知道什么时候可以拿到全部上传的文件&#xff0c;再一起调后台接口。 解决方法&#xff1a; 上传文件后&…...

【HF设计模式】05-单例模式

声明&#xff1a;仅为个人学习总结&#xff0c;还请批判性查看&#xff0c;如有不同观点&#xff0c;欢迎交流。 摘要 《Head First设计模式》第5章笔记&#xff1a;结合示例应用和代码&#xff0c;介绍单例模式&#xff0c;包括遇到的问题、采用的解决方案、以及达到的效果。…...

运维人员的Python详细学习路线

以下是一条适合运维人员的Python详细学习路线&#xff1a; 一、基础入门阶段&#xff08;第1 - 2个月&#xff09; 环境搭建与基础语法&#xff08;第1个月&#xff09; 安装与配置 在运维常用的操作系统&#xff08;如Linux或Windows&#xff09;上安装Python。对于Linux系统…...

软件体系结构与设计模式

在软件开发中&#xff0c;软件体系结构和设计模式是两个至关重要的概念。它们帮助开发者设计出易于理解、可扩展、可维护的系统。尽管这两个概念密切相关&#xff0c;但它们分别关注系统的不同方面&#xff1a;软件体系结构关注的是系统整体结构的设计&#xff0c;而设计模式则…...

安徽省地图arcgis数据美化后mxd文件shp格式下载后内容测评

标题中的“安徽省地图arcgis数据美化后mxd文件shp格式”揭示了这个压缩包的内容是经过GIS处理的、针对安徽省地图数据。ArcGIS是一款由Esri公司开发的专业地理信息系统软件&#xff0c;用于处理、分析和展示地理空间数据。MXD文件是ArcGIS的项目文件&#xff0c;包含了地图布局…...

MySQL数据库备份与恢复策略

数据是企业和应用的核心资产,可靠的备份和恢复策略是确保数据安全性和业务连续性的关键。在本篇文章中,我们将详细介绍 MySQL 数据库的备份和恢复方法,包括逻辑备份、物理备份、自动化备份,以及常见问题的处理方法。 一、逻辑备份 逻辑备份是通过导出数据库的结构和数据生…...

go语言zero框架中教务crm系统的在职继承和离职交接的设计与实践

在GoZero中实现一个在职继承和离职交接的通用模块&#xff0c;涉及到顾问离职交接客户、领导离职交接审批单据等功能。为了使这个模块通用且易于扩展&#xff0c;我们可以分成几个部分&#xff1a; 1. **数据模型设计**&#xff1a;我们首先需要设计离职交接相关的数据模型。 …...

C# 设计模式(结构型模式):桥接模式

C# 设计模式&#xff08;结构型模式&#xff09;&#xff1a;桥接模式 在软件设计中&#xff0c;我们经常会遇到系统的变化频繁&#xff0c;或者需要灵活扩展功能的场景。这时&#xff0c;桥接模式&#xff08;Bridge Pattern&#xff09;便显得尤为重要。桥接模式是一个结构型…...

C# 设计模式(行为型模式):解释器模式

C# 设计模式&#xff08;行为型模式&#xff09;&#xff1a;解释器模式 (Interpreter Pattern) 什么是解释器模式&#xff1f; 解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为型设计模式&#xff0c;用于定义一种语言的语法表示&#xff0c;并提供一个解释…...

如何 cURL Elasticsearch:进入 Shell

作者&#xff1a;来自 Elastic Philipp Krenn Kibana 的控制台是开始使用 Elasticsearch 的 REST API 的最简单方法 - 语法突出显示、自动完成、格式化、导出 cURL、JavaScript 或 Python。而且你不必担心正确的端点、身份验证等。但是有时&#xff0c;如果 Kibana 不可用、你…...

深信服云桌面系统的终端安全准入设置

深信服的云桌面系统在默认状态下没有终端的安全准入设置&#xff0c;这也意味着同样的虚拟机&#xff0c;使用云桌面终端或者桌面套件都可以登录&#xff0c;但这也给系统带来了一些安全隐患&#xff0c;所以&#xff0c;一般情况下需要设置终端的安全准入策略&#xff0c;防止…...

Node.js 模块系统

Node.js 模块系统 1. 引言 Node.js,作为一个轻量级、高效的服务器端 JavaScript 运行环境,其模块系统是其最核心的特性之一。Node.js 的模块系统允许开发者将代码组织成多个文件,每个文件都是一个模块,这样可以提高代码的可维护性和可重用性。本文将详细介绍 Node.js 的模…...

数据结构知识收集尊享版(迅速了解回顾相关知识)

1、单链表、循环链表、双向链表&#xff0c;存储、逻辑结构 单链表、循环链表和双向链表都是线性表的链式存储结构&#xff0c;它们在存储和逻辑结构上有一些共同点和不同点。 存储结构 单链表&#xff1a;每个节点包含一个数据域和一个指针域&#xff0c;指针域指向下一个节…...

SpringMVC启动与请求处理流程解析

目录 SpringMVC的基本结构 1.MVC简介 2.基本结构 什么是Handler&#xff1f; 什么是HandlerMapping? 什么是HandlerAdapter&#xff1f; RequestMapping方法参数解析 DispatcherServlet的init()方法 DispatcherServlet的doService()方法 SpringBoot整合SpringMVC …...

C++ 日志库 spdlog 使用教程

Spdlog是一个快速、异步、线程安全的C日志库&#xff0c;他可以方便地记录应用程序的运行状态&#xff0c;并提供多种输出格式。官网&#xff1a;https://github.com/gabime/spdlog 安装教程可以参考&#xff1a;https://blog.csdn.net/Harrytsz/article/details/144887297 S…...

`http_port_t

http_port_t 是 SELinux&#xff08;Security-Enhanced Linux&#xff09;中的一种端口类型标签&#xff0c;用于标识哪些端口可以被 HTTP 和 HTTPS 服务使用。SELinux 是一种强制访问控制&#xff08;MAC&#xff09;安全模块&#xff0c;它通过定义安全策略来限制进程对系统资…...

SpringBoot中实现拦截器和过滤器

【SpringBoot中实现过滤器和拦截器】 1.过滤器和拦截器简述 过滤器Filter和拦截器Interceptor&#xff0c;在功能方面很类似&#xff0c;但在具体实现方面差距还是比较大的。 2.过滤器的配置 2.1 自定义过滤器&#xff0c;实现Filter接口(SpringBoot 3.0 开始&#xff0c;jak…...

不锈钢均温板结合强力粘合技术革新手机内部架构

摘要&#xff1a; 本文介绍了一种创新性的手机内部架构设计方案&#xff0c;其中不锈钢均温板不仅作为高效的散热元件&#xff0c;还充当了手机中框的主要结构件。通过使用强力不可拆胶水将主板、尾插和其他关键部件直接粘合到均温板上&#xff0c;该方案实现了更为紧密的热耦合…...

Docker安装使用

文章目录 Docker安装Docker的基础使用搜索&拉取镜像 Docker的生命周期利用Docker切换不同OSDocker容器 镜像的保存&分享Docker存储Docker网络 Docker安装 更新apt索引 sudo apt-get update添加Docker所需要的依赖 apt-get install ca-certificates curl gnupg lsb-r…...

React 如何进行路由变化监听

一、使用react-router库&#xff08;以react-router-dom为例&#xff09; 1. 历史&#xff08;history&#xff09;对象监听 1.1 原理 react-router内部使用history对象来管理路由历史记录。可以通过访问history对象来监听路由变化。在基于类的组件中&#xff0c;可以通过组…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…...

【Java】Ajax 技术详解

文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤:1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现:客户端实现:4. Axi…...

AT模式下的全局锁冲突如何解决?

一、全局锁冲突解决方案 1. 业务层重试机制&#xff08;推荐方案&#xff09; Service public class OrderService {GlobalTransactionalRetryable(maxAttempts 3, backoff Backoff(delay 100))public void createOrder(OrderDTO order) {// 库存扣减&#xff08;自动加全…...

华为云Flexus+DeepSeek征文 | 基于Dify构建具备联网搜索能力的知识库问答助手

华为云FlexusDeepSeek征文 | 基于Dify构建具备联网搜索能力的知识库问答助手 一、构建知识库问答助手引言二、构建知识库问答助手环境2.1 基于FlexusX实例的Dify平台2.2 基于MaaS的模型API商用服务 三、构建知识库问答助手实战3.1 配置Dify环境3.2 创建知识库问答助手3.3 使用知…...

Qt学习及使用_第1部分_认识Qt---Qt开发基本流程

前言 学以致用,通过QT框架的学习,一边实践,一边探索编程的方方面面. 参考书:<Qt 6 C开发指南>(以下称"本书") 标识说明:概念用粗体倾斜.重点内容用(加粗黑体)---重点内容(红字)---重点内容(加粗红字), 本书原话内容用深蓝色标识,比较重要的内容用加粗倾…...