vue手动拖入和导入excel模版
1.列表按钮
<el-button @click=“importExcel(scope.row.id)” size=“small” type=“text”>导入excel模版
2.按钮弹框
3.data定义数据
data () {
return {
projectId: ‘’,
importDialogVisible: false,
fileList: [], //手动上传
upload_file: ‘’, //导入excel模版名称
verifyFile: ‘’, //校验文件
file: {}, //excel文件对象
}
}
4.获取上传校验文件数据(这个数据要和上传excel模版使用md5加密做对比,如果和上传md5数据一致说明用户没有修改excel数据)
//获取校验文件md5
verifyFileExcel(e){
// 错误情况判断
const files = e.target.files
if (files.length <= 0) {
return false
} else if (!/.(txt)KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.message({
message: “上传格式不正确,请上传txt格式”,
type: “warning”
})
return false
}
const file = event.target.files[0]
const reader = new FileReader()
reader.onload = (event) => {
this.getVerifyFile(event.target.result)
}
reader.readAsText(file)
},
//不能在读取方法中使用data定义的属性赋值,要使用外部方法传值
getVerifyFile(data){
this.verifyFile = data
},
4.导入前清理数据
importExcel (id) {
this.importDialogVisible = true
this.projectId = id
//清空上传表单
this.upload_file = ‘’
this.fileList = []
if(this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.refs.fileInput1.value = null
}
if(this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.refs.fileInput2.value = null
}
//初始化校验文件位空值
this.verifyFile = null
},
5.手动上传Excel模版
Excel(e) {
let that = this
// 错误情况判断
const files = e.target.files
if (files.length <= 0) {
return false
} else if (!/.(xls|xlsx)KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.message({
message: “上传格式不正确,请上传xls或者xlsx格式”,
type: “warning”
})
return false
} else {
that.upload_file = files[0].name
}
//将上传excel文件转字节流
const reader = new FileReader()
const file = event.target.files[0]
//将Excel模版生成流对象
const formData = new FormData()
formData.append(‘file’,file)
this.file = formData
const XLSX = require(‘xlsx’)
reader.onload = event => {
const data = new Uint8Array(event.target.result)
const workbook = XLSX.read(data, { type: ‘array’ })
const sheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[sheetName]
const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
//将获取的数据传入整理数据方法中,这个方法可以传入后端接口
this.getFileList(json)
}
reader.readAsArrayBuffer(file)
}
6.拖拽上传文件
handleDrop(e) {
// 阻止浏览器的默认行为
e.preventDefault()
const file = e.dataTransfer.files[0]
if(file.size <= 0){
return false
}else if (!/.(xls|xlsx)KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.message({
message: “上传格式不正确,请上传xls或者xlsx格式”,
type: “warning”
})
} else {
this.upload_file = file.name
}
const reader = new FileReader()
this.fileList = []
const XLSX = require(‘xlsx’)
reader.onload = event => {
const data = new Uint8Array(event.target.result)
console.log(data)
const workbook = XLSX.read(data, { type: ‘array’ })
const sheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[sheetName]
const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
this.getFileList(json)
}
reader.readAsArrayBuffer(file)
}
7.提交Excel模版数据(主要是校验文件作对比,查询接口是否已经上传同样的Excel模版数据,整理Excel模版数据,传给后端接口)
async submitForm() {//1.判断校验文件是否上传if(this.verifyFile === '' || this.verifyFile === null){this.$message({message: "请上传校验文件!",type: "warning"})return}//2.返回生成校验文件var fileData = await api.getFileType(this.file)//查询是否上传excel报表(保存使用上传校验文件数据做唯一字段)var type = await api.getVerifyFile(this.verifyFile)if(type.length > 0){this.$message({message: this.upload_file + "已上传,请勿重复上传!",type: "warning"})return}//对比校验文件(对比成功提交Excel数据)if(this.verifyFile === fileData){//获取excel模版数据const files = []const dataList = []if(this.fileList.length > 0){for (let i = 0; i < this.fileList.length; i++) {if(i > 1){files.push(this.fileList[i])}}//将数据转换成对象files.forEach(item => {var param = {projectId: this.projectId,scannedName: null,problemNumber: null,scanPageNumber: null,errorRate: null,problemStatisticsName: this.upload_file.replace(".xlsx","").replace(".xls",""),verifyFile: this.verifyFile,problemStatisticsFileUrl: this.problemStatisticsFileUrl}//将excel模版数据保存到对象中//定义excel对象for (const key in item) {if(key === '0'){param.scannedName = item[key]} else if(key === '1'){param.problemNumber = item[key]} else if(key === '2'){param.scanPageNumber = item[key]} else if(key === '3'){param.errorRate = item[key]}}dataList.push(param)})}//向后端接口Excel模版数据api.importPersonnelProblem(dataList).then((data) => {this.$message({type: 'success',message: '数据导入成功!'})this.getDataList()this.importDialogVisible = false}).catch((err) => {util.$message.showInfo2(err)})} else {this.$message({type: 'warning',message: 'excel数据改动,校验文件失败!'})//刷新列表方法this.getDataList()this.importDialogVisible = false}}
dataList数据返给接口:

8.上传excel返回加密的校验文件和校验文件数据对比
接口使用MultipartFile对象接收
/**
* 生成md5校验文件
* @return
*/
@Override
public String getMd5File(MultipartFile file) {
InputStream is = null;
try {
is = file.getInputStream();
} catch (IOException e) {
e.printStackTrace();
}
int iAvail = 0;
try {
iAvail = is.available();
} catch (IOException e) {
e.printStackTrace();
}
//2.转为字节流
byte[] bytes = new byte[iAvail];
try {
is.read(bytes);
} catch (IOException e) {
e.printStackTrace();
}
//3.将文件名转成utf-8字节数组
String str = file.getOriginalFilename().replace(“.xlsx”,“”).replace(“.xls”,“”);
byte[] byteArray = str.getBytes(StandardCharsets.UTF_8);
//4.合并文件名utf-8和excel文件字节数组
byte[] type = addBytes(byteArray ,bytes);
//5.md5加密生成校验文件
String md5 = DigestUtils.md5Hex(type).toUpperCase();
System.out.println(“md5大写:” + md5);
return md5;
}
相关文章:
vue手动拖入和导入excel模版
1.列表按钮 <el-button click“importExcel(scope.row.id)” size“small” type“text”>导入excel模版 2.按钮弹框 3.data定义数据 data () { return { projectId: ‘’, importDialogVisible: false, fileList: [], //手动上传 upload_file: ‘’, //导入excel模版…...
Linux下导出dump文件(Oracle和PG数据)
dump文件可以快速的导入导出,所以在数据量较大的情况下用其他方法导出数据都不如dump。 不管是什么数据库,第一步都需要登录Oracle用户 su - oracle登录之后可以选择导出文件到当前目录 Oracle数据库导出指定表: exp 数据库用户名/密码lo…...
TSINGSEE青犀睡岗离岗检测算法——确保加油站安全运营
众所周知,加油站是一个需要24小时营业的场所,由于夜间加油人员较少,员工极易处于疲劳或者睡眠状态,为保障安全和效率,通过TSINGSEE青犀睡岗离岗检测算法在加油站场景中,可以及时发现工作人员的疲劳状况&…...
gd32部分映射1/2,完全映射,备用功能选择等
一、重映射与部分映射问题 参考相应用户手册; 打开:I/O 重映射功能和调试配置; AFIO 端口配置寄存器 0(AFIO_PCF0); AFIO 端口配置寄存器 1(AFIO_PCF1); 【e.g】以定时器…...
如何高效自学(黑客技术)方法——网络安全
如果你想自学网络安全,首先你必须了解什么是网络安全!,什么是黑客!! 1.无论网络、Web、移动、桌面、云等哪个领域,都有攻与防两面性,例如 Web 安全技术,既有 Web 渗透2.也有 Web 防…...
K8S基础架构租赁(Lease )
分布式系统通常需要租约(leases),租约提供了锁定共享资源和在一组成员之间协调活动的机制。 在Kubernetes中,租约的概念由协调(k8s.io) API组中的Lease对象表示。 在Kubernetes中,Lease对象用于协调集群中的节点和组件之间的通信和协作。例如…...
vue使用smooth-signature实现移动端电子签字,包括横竖屏
vue使用smooth-signature实现移动端电子签字,包括横竖屏 1.使用smooth-signature npm install --save smooth-signature二.页面引入插件 import SmoothSignature from "smooth-signature";三.实现效果 四.完整代码 <template><div class&quo…...
K8s概念汇总-笔记
目录 1.Master 1.1在Master上运⾏着以下关键进程 2.什么是Node? 1.2在每个Node上都运⾏着以下关键进程 3.什么是 Pod ? 4. 什么是Label ? 5.Replication Controller 6.Deployment 6.1Deployment的典型场景: 7.Horizontal Pod Autoscaler TODO…...
小程序设计基本微信小程序的校园生活助手系统
项目介绍 通篇文章的撰写基础是实际的应用需要,然后在架构系统之前全面复习大学所修习的相关知识以及网络提供的技术应用教程,以校园生活助手系统的实际应用需要出发,架构系统来改善现校园生活助手系统工作流程繁琐等问题。不仅如此以操作者…...
程序包com.sun.xml.internal.bind.marshaller不存在
程序包com.sun.xml.internal.bind.marshaller不存在 需要引入的依赖 <dependency><groupId>org.jetbrains.kotlin</groupId><artifactId>kotlin-stdlib</artifactId><version>1.3.50</version></dependency><dependency&g…...
Docker 入门
What - 什么是容器 容器是一种轻量级、可移植、自包含的软件打包技术,使应用程序可以在几乎任何地方以相同的方式运行。开发人员在自己笔记本上创建并测试好的容器,无须任何修改就能够在生产系统的虚拟机、物理服务器或公有云主机上运行。容器与虚拟机谈…...
Arduino驱动ME007-ULS防水测距模组(超声波传感器)
目录 1、传感器特性 2、控制器和传感器连线图 3、驱动程序 ULS型超声波传感器,是采用一体化防水探头设计而成的一款高性能的测距传感器,采用超声波回拨测距原理,运用精准的时差测量技术测量非接触式传感器与目标物体的之间的距离。对于透明物体或有色物体,金属物体,非金…...
docker容器怎么设置开机启动
docker容器怎么设置开机启动 docker服务器、以及容器设置自动启动 回到顶部 一、docker服务设置自动启动 说明:适用于yum安装的各种服务 查看已启动的服务 systemctl list-units --typeservice 查看是否设置开机启动 systemctl list-unit-files | grep enable 设…...
基于springboot实现校园交友网站管理系统项目【项目源码+论文说明】
基于springboot实现校园交友网站管理系统演示 摘要 随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生…...
支付宝证书到期更新完整过程
如果用户收到 支付宝公钥证书 到期通知后,可以根据如下指引更新证书 确认上传成功后就会生成新的证书,把新的证书替换到生产环境就可以了...
Linux 云服务器磁盘挂载简介
云服务器磁盘挂载 一、挂载须知 一般涉及工具或命令:fdisk/gdisk/parted等挂载(mounting)是指由操作系统使一个存储设备(诸如硬盘、CD-ROM或共享资源共享资源上的计算机文件和目录可供用户通过计算机的文件系统访问的一个过程。…...
LeetCode--3.无重复字符的最长子串
1 题目描述 给定一个字符串 s , 请你找出其中不含有重复字符的 最长子串 的长度 示例 1: **输入:** s "abcabcbb" **输出:** 3 **解释:** 因为无重复字符的最长子串是 "abc", 所以其长度为 3示例 2: **输入:** s "bbbbb" **输出:** 1 **解…...
iOS调试技巧——使用Python 自定义LLDB
一、类介绍 在使用Python 自定义LLDB之前,先了解一下LLDB的一些类型 SBTarget 正在被调试的程序SBProcess 和程序关联的具体的进程SBThread 执行的线程SBFrame 和线程关联的一个栈帧SBVariable 变量,寄存器或是一个表达式 一般情况下,我们…...
经典卷积神经网络 - ResNet
ResNet是一种残差网络,咱们可以把它理解为一个子网络,这个子网络经过堆叠可以构成一个很深的网络。 我们一直在加深神经网络,但是加深不一定只会带来好处。 残差块 串联一个层改变函数类,我们希望能扩大函数类残差块加入快速通…...
一、高效构建Java应用:Maven入门和进阶
一、高效构建Java应用:Maven入门和进阶 目录 一、Maven简介和快速入门 1.1 Maven介绍1.2 Maven主要作用理解1.3 Maven安装和配置 二、基于IDEA的Maven工程创建 2.1梳理Maven工程GAVP属性2.2 Idea构建Maven JavaSE工程2.3 Idea构建Maven JavaEE工程2.4 Maven工程项…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
