VUE中 上传excel文件并解析内容

Vue前端上传EXCEL文件,后端(springBoot+MyBatis+MySQL)解析EXCEL并批量插入/更新数据库 文章目录Vue前端后端controller层service层:如何解析Excel文件MyBatis:实现批量插入在mysql中设置唯一索引Unique Index Vue前端 前端主要用了element-ui的upload组件。 <el-upload class="filter-item" name="excelFile" :act... 阅读详情
<el-upload  :action="url" :http-request="importExcel" list-type="text" :show-file-list="false" >
      <el-button size="small"  type="primary">导入</el-button>
    </el-upload>

   import XLSX from 'xlsx'         // 需要引入   XLSX 

  importExcel (content) {
    const file = content.file
    // let file = file.files[0] // 使用传统的input方法需要加上这一步
    const types = file.name.split('.')[1]
    const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
    if (!fileType) {
      this.$message('格式错误!请重新选择')
      return
    }
    this.file2Xce(file).then(tabJson => {
      if (tabJson && tabJson.length > 0) {
        this.xlsxJson = tabJson
        this.fileList = this.xlsxJson[0].sheet
        let n = '匹配的字段'
        this.fileList.forEach((item, index, arr) => {
          if (item[n] === this.name) {
            this.dataForm.projectno = item['XXXX'] // 需要的值的表头
          }
        })
      }
    })
  },
  file2Xce (file) {
    return new Promise(function (resolve, reject) {
      const reader = new FileReader()
      reader.onload = function (e) {
        const data = e.target.result
        this.wb = XLSX.read(data, {
          type: 'binary'
        })
        const result = []
        this.wb.SheetNames.forEach((sheetName) => {
          result.push({
            sheetName: sheetName,
            sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
          })
        })
        resolve(result)
      }
      // reader.readAsBinaryString(file.raw)
      reader.readAsBinaryString(file) // 传统input方法
    })
  },

借鉴了别人的

数据挖掘实战-基于随机森林算法的交通事故预测模型 本实验数据集来源于Kaggle,原始数据集共有209306条,该数据集包含不同地区和时间段的交通事故详细信息。它包括各种指标,例如事故日期、天气状况、照明条件、碰撞类型、受伤人数和车辆参与情况。数据涵盖多个地点和事故类型,可全面了解交通事故及其原因。具体包括:crash_date:事故发生的日期。Traffic_control_device:所涉及的交通控制设备的类型(例如交通灯、标志)。weather_condition:事故发生时的天气状况。 阅读详情

相关推荐

Zynq AXI DMA实战:5分钟搞懂S_AXIS_S2MM和M_AXIS_MM2S数据流(附Vivado配置截图)

本文通过Vivado实战配置,清晰解析了Zynq平台AXI DMA IP核中S_AXIS_S2MM和M_AXIS_MM2S数据流的核心概念与连接方法。文章重点阐述了数据流向、主从关系及接口命名规则,并提供了从ADC数据采集到DDR存储,再从DDR读取数据发送至DAC的完整双向数据流搭建指南,帮助工程师快速避坑。

weixin_29200741的博客 451

写给自己的文件上传攻略以及el-upoad使用详解

在文件上传前做类型大小等限制 一种方式是,加accpet属性 <el-upload class="upload-demo" :multiple="true" :action="action" accept="image/jpeg,image/gif,image/png,image/bmp" :file-list="fileList" :before-upload="beforeAvatar...

weixin_44500533的博客 983

使用TensorFlow Lite Micro流程记录(带源码)

记录如何使用tensorflow lite micro,以及期间解决的问题

ZhaoDongyu_AK47的博客 6216

Springboot+vue上传并按行读取txt数据

前端(主要用了element官方组件): <el-upload class="upload-demo" ref="upload" :on-success="handleAvatarSuccess"//回调方法 :action="uploadTxt()"//后台接口 :on-remove="hand...

水越帆的博客 2830

校园网改造实录:手把手教你用华为MA5800 OLT调试全光网(附常用排错命令)

本文详细记录了校园全光网改造中华为MA5800 OLT的部署与调试过程,涵盖设备选型、基础配置、ONU批量部署及高频故障排查。通过实战案例和排错命令,帮助网络工程师快速掌握全光网调试技巧,实现低延迟、高稳定的网络性能。

weixin_42552716的博客 573

使用cubeMX生成USB HID设备

本文主要介绍如何使用stm32开发板和cubeMX生成HID设备,供参考。

专注音频,高效工作,快乐生活! 970

前端上传txt文件并解析

HTML: <input type="file" ref="upload" accept=".txt" class="file" @change="getTxtList" v-show="false"/> <el-button size="mini" type="primary" @click="uploadTxt" class="mb20">上传文件</el-button> JS: /** * 上传txt文件 */ uplo

weixin_43900929的博客 1860

利用XGBoost实现短期电力负荷预测

本数据集为某地区2009年-2015年的用电负荷,时间片为每分钟这里我们定义了XGB模型作为实例,来进行模型训练,之后我们会对其使用网格搜索找到最优的参数。

优快云 精品推荐 4495

element-ui Upload前端读取上传的文件

element-ui upload前端读取上传的文件

weixin_43805439的博客 2万+

llama2-7b下载并转llama-2-7b-hf

④输入https://github.com/huggingface/transformers/blob/main/src/transformers/models/llama/convert_llama_weights_to_hf.py会下载 convert_llama_weights_to_hf.py 文件,我们需要用到这个文件将llama2-7b转成llama-2-7b-hf。③下载完之后是这四个文件,这里我是在windows操作系统中安装的WSL,没有linux操作系统,没办法。

wenling54321的博客 1030

Nerf 训练自有数据

colmap相机位姿转为LLFF格式数据

zfjBIT的专栏 2309

Element-UI upload上传文件失败 正确解析错误内容

<el-upload class="upload" :action="uploadExcelAction" :headers="headers" list-type="picture" :show-file-list="false" :before-upload="beforeUpload" :on-success="uploadSuccess" :on-error="u...

IceStreamLab 8955

多智能体系统在AI物流优化中的实际应用案例

订单波峰波谷难应对(如双11订单量暴增300%);动态干扰难处理(如突发交通拥堵、客户临时改地址);全局优化难实现(单辆车最优≠整体最优)。本文聚焦“多智能体系统(MAS)”这一AI技术,讲解其如何通过“群体智能”破解物流调度难题,并结合实际案例展示落地效果。本文从“生活故事→核心概念→技术原理→实战案例→未来趋势”逐步展开,用“快递员团队协作送外卖”类比MAS运作,结合Python代码模拟任务分配,最后通过某物流企业的真实项目验证效果。

AIGC应用创新大全的博客 1632

ant-vue实现上传excel文件并解析内容

a-upload解析excel表格内容

qq_23128255的博客 1558

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

VUE中 上传excel文件并解析,将解析内容以数组方式传递给后端(可排序excel表内容)

在VUE框架下搭建,<template>内容 <template> <div> <el-upload class="upload-demo" drag action="http://127.0.0.1:3344/file" accept=".xlsx" :on-exceed="exceed":limit="1" :on-remove="remove" :before-upload="beforeUpload"> <i.

weixin_40154329的博客 2249

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

egg(十):上传excel文件并解析内容,存到mysql数据库,并保存到本地,vue+egg实现前后端

前言: 在egg中的上传是有两种方法:官方入口 File 模式: Stream 模式:

weixin_44727080的博客 2071

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

egg(十一):上传excel文件并解析内容,存到mysql数据库,并保存到本地,vue+egg实现前后端

前言: 在egg中的上传是有两种方法来实现:官方入口 File 模式: Stream 模式: 目录: 实现效果: 1、界面上 2、代码中:上传以后,mysql中新增数据,并且,public/ upload/ excel 里面保存我们上传的文件 这里来讲一讲他的Stream 模式模式的用法: 后端部分: 1、引入插件: 2、准备一个excel文件,如果是按照我教程的话,第九步就是下载功能的实现,入口点我 3、router文件里面配置路由 ...

weixin_44727080的博客 1669

vue+element 前端解析excel并表格展示

首先引入依赖模块: npm install xlsx --save 在需要解析excel的页面(vue文件)中引入依赖: import XLSX from 'xlsx' 页面部分: 使用elementUI组件完成文件上传: <!-- excel表格上传 --> <el-upload class="upload-demo" ...

ch_jia_jia的博客 1万+

vue+element导入并读取excel内容

vue+element导入并读取excel内容 1.安装依赖 npm install -S file-saver xlsx npm install -D script-loader 2.在src目录下新建一个js文件夹引入Blob.js和expor2Excal.js 3.在main.js里引入 //引入导出excel的js文件 import Blob from './js/Blob' import Export2Excel from './js/Export2Excel' 4.在template里引入

weixin_44052274的博客 1726

vue中实现:解压zip,解析excel页签内容,并实现附件上传

功能 1.对上传的zip压缩包进行解压。 2.解析excel页签中内容,用于列表数据展示。 3.上传excel附件,用于预览。 4.采用input中type="file"来实现上述功能 1.html <div @click="upload">上传</div> <!-- 加一层if判断的原因:防止上传一次之后,在没有刷新的前提下,再次点击上传,不触发上传功能。 --> <div v-if="uploadShowFlag"> <input .

故里的博客 1997

vue前端导入excel表格并解析表格内数据

Mon Nov 02 2020 23:59:17 GMT+0800 会转成2020/11/2 所以需要在moment转换后+1天。如2020/11/3,xlsx会解析成 Mon Nov 02 2020 23:59:17 GMT+0800 小了43秒。转换成中国标准时间,我最终想要的是转换成自己想要的时间格式,需要moment工具类。定义一个转换日期格式的方法(转成日期格式:YYYY-MM-DD)

MISS_zhang_0110的博客 7744

批量添加:vue+easyexcel 上传excel文件解析为Java对象并保存到数据库

类,我们需要根据自身情况去具体的设置,如果说excel文件中的数据就是刚好能符合后端接收数据的对象的属性,那么我们无需再定义一个类去接收。如果excel文件中只是包含了个别字段,那么我们最好再去定义一个新的类先将数据接收并保存,再将数据copy给指定的类的集合。通过上面的代码我们就能实现前端传输Excel文件到后端进行解析的操作了,最终得到一个集合,再进一步对集合中数据进行相应的操作即可。后端:接收到前端传输的文件后,将其读取到内存中,再通过EasyExcel对其进行解析。Controller层代码。

weixin_45890113的博客 1486

Vue 读取excel文件的两种方式

Vue 读取 excel 文件

noeal的博客 1万+

解析上传excle文件内容(文件中字段为空也会显示)

在项目中上传excel文件是很常见的,那如何解析其内容呢,一起来看看吧: 按钮 <input type="file" name="file" id="file" accept=".xls, .xlsx" background="none" @change="changeinput"/>请上传文件 事件 async changeinput(event) { const file = event.target.files[0]; const types = file.name.sp

The One Who's at the Front 790

vue + elementUI导入Excel读取文件内容

vue + elementUI导入Excel读取文件内容 实现导入Excel数据内容,渲染到页面 代码 导入按钮 代码片. // 导入按钮 <el-upload class="upload-demo" action="" :on-change="handleChange" :show-file-list="false" :auto-upload="false"> <el-button type="primary" size="small" onclick="">批量导入&lt

weixin_43931918的博客 2164

elementUI加springboot实现上传excel文件给后端并读取excel

最近在研究如何通过vue的elemenetui框架加上springboot去实现从前端上传文件给后端,在进行文件查找的时候,大部分我进行查找的都是怎么上传文件给服务器,所以也为了记录,就计划写下本文章; 同时,本次实现上传excel并对excel的内容进行读取......

xc9711的博客 5573
上一篇: js常用正则表达式
下一篇: sd
攻城狮狮
博客等级 码龄9年 727粉丝 78原创
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

攻城狮狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值