el-upload上传文件前端自己读取excel

1.读取方法 需要下载xlsx依赖 

export const readExcelFile = (file) => {return new Promise((resolve, reject) => {let reader = new FileReader();reader.readAsBinaryString(file.raw);reader.onload = (ev) => {try {let dataBinary = ev.target.result;let workBook = XLSX.read(dataBinary, { type: "binary", cellDates: true });let workSheet = workBook.Sheets[workBook.SheetNames[0]];const data = XLSX.utils.sheet_to_json(workSheet); //这里已经能拿到转换后的jsonresolve(data);} catch (err) {reject(err);}};reader.onerror = (ev) => {reject("文件读取失败");};});
};

 2.使用

<el-upload action=""accept=".xls,.xlsx"ref="uploadVm":auto-upload="false":show-file-list="false":limit="1":on-exceed="handleExceed":on-change="handleFileChange"><div class="btn fr_c fj_c cp" slot="reference">导入销售机会 /></div>     
</el-upload>
        //文件超出覆盖handleExceed(files, fileList) {this.$set(fileList[0], "raw", files[0]); //raw就是指文件this.$set(fileList[0], "name", files[0].name); //name就是指文件名this.$refs.uploadVm.clearFiles(); //删除所有上传的文件this.$refs.uploadVm.handleStart(files[0]); //handleStart()指的是手动选择文件,Element Plus 的el-upload有说明},//change事件handleFileChange(file) {readExcelFile(file).then((data) => {let excelData = data.map((item) => {return {saleName: item["销售机会名称"],customerName: item["客户名称"],};});}).catch((err) => {this.$message.error("文件读取失败");this.$refs.uploadVm.clearFiles();});},

如果后端配合可以通过前端传递formData对象 后端返回list那就不需要前端读取了

//点击文件上传
const handleFileChange = debounce((file, fileArr) => {noDatauploadRef.value && noDatauploadRef.value.clearFiles();uploadRef.value && uploadRef.value.clearFiles();if (!checkFileSize(fileArr)) return;//整理form对象let formData = new FormData();fileArr.forEach((fileItem) => {formData.append("files", fileItem.raw);});formData.append("batchId", batchId.value);//整体校验接口 获取文件状态upLoadToHttp(formData).then((resList) => {if (!resList.length) {ElMessage.error("获取文件列表为空");return;}fileArr.forEach((item, index) => {state.fileList.push({...resList[index],...fileArr[index],fileType: item.name.slice(item.name.lastIndexOf(".")),fileName: item.name.slice(0, item.name.lastIndexOf(".")),});});});
}, 300);// 多个文件时上传方法会调用多次 因为配置了手动上传 before-upload不生效
const checkFileSize = (fileArr) => {//文件数量限制if (fileArr.length > 10) {ElMessage.error("上传文件数量最多10个!");return false;}//文件大小限制let allfileSizeNum = fileArr.map((fileItem) => {return fileItem.size;}).reduce(function (prev, curr) {return prev + curr;}, 0);const is20M = allfileSizeNum / 1024 / 1024 < 20;if (!is20M) {ElMessage.error("上传文件总大小不能超过20MB!");return false;}return true;
};

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

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

相关文章

PyTorch 教程-快速上手指南

文章目录 PyTorch Quickstart1.处理数据2.创建模型3.优化模型参数4.保存模型5.加载模型 PyTorch 基础入门1.Tensors1.1初始化张量1.2张量的属性1.3张量运算1.3.1张量的索引和切片1.3.2张量的连接1.3.3算术运算1.3.4单元素张量转变为Python数值 1.4Tensor与NumPy的桥接1.4.1Tens…

腾讯云轻量4核8G12M服务器配置4C8G12M详解

4核8G是云服务器的参数&#xff0c;代表云服务器的硬件配置和网络带宽&#xff0c;4核代表CPU、8G是指内存、12M代表带宽值为12Mbps&#xff0c;腾讯云百科txybk.com以腾讯云轻量应用服务器4核8G12M带宽配置为例&#xff0c;来详细介绍下服务器参数&#xff1a; 4c8g是什么意思…

Unity学习笔记 9.2D射线

下载源码 UnityPackage 1.Ray2D 让小球向右发射射线&#xff1a; Ray2D ray;void Start() {// Ray2D(起点&#xff0c;终点)ray new Ray2D(this.transform.position, Vector2.right);// Debug.DrawLine(起点&#xff0c;终点&#xff0c;颜色&#xff0c;显示时间)Debug.DrawL…

嵌入式开发——基础电路知识

1. 电路知识 1.1. 驱动能力 IC是数字逻辑芯片&#xff0c;其输出的是逻辑电平。逻辑电平0表示输出电压低于阈值电压&#xff0c;逻辑1表示输出电压高于阈值电压。负载则是被驱动的电路或元件&#xff0c;负载大小则指负载的电阻大小。 驱动能力主要表现在几个方面&#xff1…

C语言经典例题(9) --- 简单计算器、获得月份天数、HTTP状态码、图像相似度、有序序列插入一个数

文章目录 1.简单计算器2.获得月份天数3.HTTP状态码4. 图像相似度5.有序序列插入一个数 1.简单计算器 题目描述&#xff1a; KK实现一个简单计算器&#xff0c;实现两个数的“加减乘除”运算&#xff0c;用户从键盘输入算式“操作数1运算符操作数2”&#xff0c;计算并输出表达…

MySQL使用教程:数据库、表操作

目录 1. 免密码登录MySQL1.1 免密码配置1.2 登录选项介绍 2. MySQL基础配置&#xff1a;my.cnf3. 开机自启动设置&#xff08;可选设置&#xff09;4. 查看存储引擎5. 查看系统的编码规则和校验规则6. 数据库的操作6.1 查看数据库6.2 创建数据库 create database6.3 删除数据库…

【[NOIP1999 普及组] Cantor 表】

题目描述 现代数学的著名证明之一是 Georg Cantor 证明了有理数是可枚举的。他是用下面这一张表来证明这一命题的&#xff1a; 我们以 Z 字形给上表的每一项编号。第一项是 1 / 1 1/1 1/1&#xff0c;然后是 1 / 2 1/2 1/2&#xff0c; 2 / 1 2/1 2/1&#xff0c; 3 / 1 3/1…

腾讯云2核4G服务器最大能承载多少人访问?

腾讯云轻量应用服务器2核4G5M配置性能测评&#xff0c;腾讯云轻量2核4G5M带宽服务器支持多少人在线访问&#xff1f;并发数10&#xff0c;支持每天5000IP人数访问&#xff0c;腾讯云百科txybk.com整理2核4G服务器支持多少人同时在线&#xff1f;并发数测试、CPU性能、内存性能、…

openGauss DCF

DCF 可获得性 本特性自openGauss 2.0.0版本开始引入。 特性简介 DCF&#xff08;Distributed Consensus Framework&#xff0c;分布式共识框架&#xff09;基于Paxos算法实现数据同步强一致。DCF模式开关开启后&#xff0c;DN可以支持基于Paxos协议的复制与仲裁能力。 客户…

python入门题:输入输出练习

以下是Python基础语法的练习&#xff0c;项目要求和代码如下&#xff1a; """ 例3&#xff1a;小精灵&#xff1a;你好&#xff0c;欢迎古灵阁&#xff0c;请问您需要帮助吗&#xff1f;需要or不需要&#xff1f; 你&#xff1a;需要 小精灵&#xff1a;请问你需…

图片照片怎么做成二维码?图片快速生成二维码的简单教学

随着互联网的快速发展&#xff0c;二维码作为现在很常用的一种内容载体方式&#xff0c;可以应用的场景越来越多&#xff0c;不管是用于企业宣传、产品介绍、问卷调查等类型的内容&#xff0c;都能够使用二维码的形式展示。二维码能够提供更加快捷的有效的推广效果&#xff0c;…

高阶数据结构 <红黑树>

本文已收录至《数据结构(C/C语言)》专栏&#xff01; 作者&#xff1a;ARMCSKGT 目录 前言正文红黑树简介红黑树整体结构红黑树节点的定义红黑树主体类设计红黑树的插入函数情况一&#xff1a;变色情况二&#xff1a;变色旋转单旋情况双旋情况 完整插入代码 关于红黑树红黑树检…

系统安装(kuntaiR522 kvm安装)

(1)通过PC1 web连接Server2,给Server2安装rocky-arm64 CLI系统(语言为英文)。 首先是访问server2的IPMI口,访问192.168.2.10, 用户为Admin,密码为Admin@123 登录进去 以HTML5 集成控制台方式打开 插入U盘修改启动项安装系统

Floyd算法:浅显外表下的动态规划内核

很久没遇到Floyd算法的题目了&#xff0c;2642. 设计可以求最短路径的图类刚好是一个典型。在实现核心算法之余&#xff0c;顺便整理一下算法的内核。 Floyd-Warshall’s Algorithm Floyd-Warshall算法&#xff0c;简称Floyd算法&#xff0c;是“有向图非负权图的多源最短路”…

Selenium自动化测试面试题全家桶

1、什么是自动化测试、自动化测试的优势是什么&#xff1f; 通过工具或脚本代替手工测试执行过程的测试都叫自动化测试。 自动化测试的优势&#xff1a; 1、减少回归测试成本 2、减少兼容性测试成本 3、提高测试反馈速度 4、提高测试覆盖率 5、让测试工程师做更有意义的…

10个你必须知道的浏览器指纹检测工具,保护你的隐私安全

在当前的数字时代&#xff0c;个人隐私保护变得越来越重要&#xff0c;特别是对于互联网用户来说。有一种叫做“浏览器指纹”的技术&#xff0c;它能悄悄收集我们使用的浏览器和设备的各种细节信息。这本是为提供个性化服务&#xff0c;但对那些需要在不同平台同时管理多个账号…

python项目子模块配置

创建模块子应用 1.在项目中新建一个apps的目录&#xff0c;用于存放所有子模块应用 2.在apps包下创建所需应用 注册模块子应用 1.在主模块里面寻找到配置文件 2.在配置文件中找到 INSTALLED_APPS&#xff0c;添加相应路径apps.users Tips: 由于每次添加都要输入前缀apps.会…

C++|类封装、类的分文件编写练习:设计立方体类、点和圆的关系

文章目录 练习案例1&#xff1a;设计立方体类CPP代码 练习案例2:点和圆的关系CPP代码 代码总结类的分文件编写 练习案例1&#xff1a;设计立方体类 设计立方体类(Cube) 求出立方体的面积和体积 分别用全局函数和成员函数判断两个立方体是否相等。 CPP代码 class Cube { pub…

json数据封装和解析常用到的方法

json数据封装和解析常用到的方法 参考博客 将JSONObject对象解析为VO的方法&#xff08;VO中的数据可以为任何类型&#xff09; GsonBuilder gsonBuilder new GsonBuilder(); UFDataTypeDeserializer ufDeserializer new UFDataTypeDeserializer(); gsonBuilder.registerT…

kubernetes名称空间和资源配额

名称空间 一.名称空间概念二.Namespace使用场景三.名称空间基本操作1.创建Namespace两种方式2.Namespace资源限额 一.名称空间概念 Kubernetes 支持多个虚拟集群&#xff0c;它们底层依赖于同一个物理集群。 这些虚拟集群被称为命名空间。 命名空间namespace是k8s集群级别的资…