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('上传成功')

    }

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

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

相关文章

文献分享:RoarGraph——跨模态的最邻近查询

文章目录 1. \textbf{1. } 1. 导论 1.1. \textbf{1.1. } 1.1. 研究背景 1.2. \textbf{1.2. } 1.2. 本文的研究 1.3. \textbf{1.3. } 1.3. 有关工作 2. \textbf{2. } 2. 对 OOD \textbf{OOD} OOD负载的分析与验证 2.1. \textbf{2.1. } 2.1. 初步的背景及其验证 2.1.1. \textbf{2…

智慧工地信息管理与智能预警平台

建设背景与政策导向 智慧工地信息管理与智能预警平台的出现&#xff0c;源于工地管理面临的诸多挑战&#xff0c;如施工地点分散、危险区域多、监控手段落后等。随着政府对建筑产业现代化的积极推动&#xff0c;各地纷纷出台政策支持智慧工地的发展&#xff0c;旨在通过信息技…

[论文笔记]Representation Learning with Contrastive Predictive Coding

引言 今天带来论文 Representation Learning with Contrastive Predictive Coding的笔记。 提出了一种通用的无监督学习方法从高维数据中提取有用表示&#xff0c;称为对比预测编码(Contrastive Predictive Coding,CPC)。使用了一种概率对比损失&#xff0c; 通过使用负采样使…

Apache PDFBox添加maven依赖,pdf转成图片

要使用Apache PDFBox将PDF文件转换为图片&#xff0c;并将其添加到Maven项目中&#xff0c;您可以按照以下步骤操作&#xff1a; 1. 添加Maven依赖 在您的pom.xml文件中添加Apache PDFBox的依赖。请确保使用最新版本的PDFBox库。截至2025年&#xff0c;以下是推荐的配置&…

微服务架构下的慢请求排查与优化策略

目录 一、分析请求路径 二、检查日志 三、进行时序分析 四、检查资源消耗 五、检查并发处理能力 六、检查网络连接 七、从根本上使用服务治理的方式解决问题 八、结语 在当今的数字化时代&#xff0c;企业为了应对快速变化的市场需求和日益增长的用户基数&#xff0c;纷…

H7-TOOL固件2.27发布,新增加40多款芯片脱机烧录,含多款车轨芯片,发布LUA API手册,CAN助手增加负载率,错误状态信息检测

H7-TOOL详细介绍&#xff08;含操作手册&#xff09;&#xff1a;H7-TOOL开发工具&#xff0c;1拖4/16脱机烧录&#xff0c;高速DAPLINK&#xff0c;RTOS Trace&#xff0c;CAN/串口助手, 示波器, RTT等&#xff0c;支持WiFi&#xff0c;以太网&#xff0c;高速USB和手持 - H7-…

xdoj-字符串-556,为什么字符不能被正常读入

目录 题目 代码 测试用例 the input the correct output 问题发现过程阐述 如果把line16中的数组大小11换成line17中的10 case 1 case 2 case 3 如果数组开成11 case4 代码分析 问题描述 Question1 Question2 题目 题目&#xff1a;连续数字字符串提取 问题描述…

LeetCode-有效的括号(020)

一.题目描述 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的…

Dubbo 关键知识点解析:负载均衡、容错、代理及相关框架对比

1.Dubbo 负载均衡策略&#xff1f; Dubbo 是一个分布式服务框架&#xff0c;它提供了多种负载均衡策略来分发服务调用。在 Dubbo 中&#xff0c;负载均衡的实现是基于客户端的&#xff0c;即由服务消费者&#xff08;Consumer&#xff09;端决定如何选择服务提供者&#xff08…

Git 入门(一)

git 工作流如下&#xff1a; 命令如下&#xff1a; clone&#xff08;克隆&#xff09;: 从远程仓库中克隆代码到本地仓库checkout &#xff08;检出&#xff09;:从本地仓库中检出一个仓库分支然后进行修订add&#xff08;添加&#xff09;: 在提交前先将代码提交到暂存区com…

【C语言】可移植性陷阱与缺陷(五): 移位运算符

在 C 语言中,移位运算符(如左移 << 和右移 >>)是对整数的二进制位进行操作的重要工具。然而,使用这些运算符时也存在一些可移植性陷阱和缺陷,特别是在处理不同大小和字节序的整数时。本文探讨一些关于移位运算符在C语言中的可移植性问题,以及如何处理这些问题…

ChatGPT 是通用人工智能吗

ChatGPT 目前并不是通用人工智能&#xff08;AGI, Artificial General Intelligence&#xff09;。它是一种专用人工智能&#xff08;Narrow AI&#xff09;&#xff0c;具体来说是一种基于大规模语言模型&#xff08;如 GPT-4&#xff09;的生成式人工智能&#xff0c;专注于处…

【网络安全 | 漏洞挖掘】JS Review + GraphQL滥用实现管理面板访问

未经许可,不得转载。 正文 在映射目标范围后,我发现了一个用于管理的控制台界面,但没有注册功能。 于是我开始尝试: 1、模糊测试注册端点 -> 失败 2、在请求中将登录替换为注册 -> 再次失败 尝试均未奏效后,我决定冷静下来,重新思考方法并利用技术手段。 我观察…

perf:对hutool的BeanUtil工具类做补充

分享一个自定义的BeanUtil&#xff0c;继承的是hutool的工具类&#xff0c;然后自己扩充了几个方法&#xff1b; 1、实现了两个对象覆盖非空属性的功能&#xff08;经常使用&#xff09;&#xff0c;不需要设置CopyOptions&#xff1b; 2、两个对象&#xff0c;对指定前缀的属…

Elasticsearch Serverless中的数据流自动分片深度解析

Elasticsearch Serverless中的数据流自动分片深度解析 一、Elasticsearch Serverless概述 1. 什么是Elasticsearch Serverless Elasticsearch Serverless是一种云端全托管的Elasticsearch服务&#xff0c;它基于云原生Serverless技术架构&#xff0c;提供自动弹性和完全免运…

模型训练二三事:参数个数、小批量、学习率衰减、输入形状

目录 获取torch参数总数 方法一&#xff1a;使用torch.nn.Module的parameters()方法 方法二&#xff1a;使用state_dict()方法 迷你batch 什么是Mini-Batch&#xff1f; 如何在PyTorch中使用Mini-Batch&#xff1f; 不指定batchsize 没有标签ytrain 即使没有标签&…

gitlab高级功能之 CICD Steps

CICD Steps 1. 介绍2. 定义 Steps2.1 Inputs2.2 Outputs 3. Using steps3.1 Set environment variables3.2 Running steps locally 4. Scripts5. Actions5.1 已知的问题 6. 表达式7. 实操7.1 单个step7.2 多个step7.3 复用steps7.4 添加output到step7.5 使用远程step 1. 介绍 …

开源数据集成平台白皮书重磅发布《Apache SeaTunnel 2024用户案例合集》!

2025年新年临近&#xff0c;Apache SeaTunnel 社区用户案例精选&#x1f4d8;也跟大家见面啦&#xff01;在过去的时间里&#xff0c;SeaTunnel 社区持续成长&#xff0c;吸引了众多开发者的关注与支持。 为了致谢一路同行的伙伴&#xff0c;也为了激励更多人加入技术共创&…

第六十四章 假脱机设备 - 使用 %SPOOL 打印

文章目录 第六十四章 假脱机设备 - 使用 %SPOOL 打印使用 %SPOOL 打印使用 Print 函数 第六十四章 假脱机设备 - 使用 %SPOOL 打印 使用 %SPOOL 打印 %SPOOL 实用程序菜单的选项 1 Print&#xff08;打印&#xff09;允许您在任何设备上打印 ^SPOOL 全局中的一个或多个文档&a…

Python:交互式物质三态知识讲解小工具

学着物理写着Python 以下是一个使用Python的Tkinter库实现的简单示例程序&#xff0c;通过图形界面展示并讲解固态、液态、气态的一些特点&#xff0c;代码中有详细的注释来帮助你理解各部分功能&#xff1a; 完整代码 import tkinter as tk from tkinter import ttk import …