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;
}

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

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

相关文章

设计模式思维导图

ProcessOn思维导图链接

性能测试工具:如何学习JMeter?

JMeter是一个广泛应用于Web应用程序性能测试与负载测试的开源负载测试工具&#xff0c;学习JMeter则可以协助软件测试工程师更好地进行自动化性能测试与负载测试&#xff0c;本文就来介绍下如何学习JMeter。 1. 应用场景 (1) Web应用程序、数据库服务器、FTP服务器、SOAP和RE…

移动应用买量越来越难,APP增长的新机遇在哪里?

近两年来&#xff0c;“买量越来越难”是移动互联网每逢年末的固定趋势&#xff0c;“内卷”对于每一个互联网运营人来说成为了越来越普遍的存在。 比如在游戏买量领域&#xff0c;一家厂商做出一个素材之后&#xff0c;很多家都会陆续跟进。其次&#xff0c;素材的生命周期下…

uniapp vue2、vue3 页面模板代码块设置

本文分享 uniapp vue2、vue3 页面模板代码块设置 设置路径 HBuilder X -> 工具 -> 代码块设置 -> vue代码块 -> 自定义代码块 如上图操作后在打开的 vue.json 文件的右侧“自定义代码块”中复制如下代码&#xff08;可全选替换也可添加到代码中&#xff09; 示…

将CSDN或Confluence文章转为微信公众号格式

最近在更公众号文章&#xff0c;苦于排版和格式&#xff0c;就找了一个比较方便的方法&#xff0c;简单易用&#xff0c;排版也不错。 文章提取 有的文章是已经发布在其它平台了&#xff0c;比如CSDN或Confluence&#xff0c;可以使用飞书剪存方便的将文章提取出来&#xff0…

Android Studio模拟器/虚拟设备连接互联网的方法

如图&#xff0c;无线、网络都无法联网 找到本机的DNS 找到emu-launch-params.txt&#xff0c;添加DNS -dns-server 192.168.124.1 重启虚拟机&#xff0c;关闭无线

[AutoSAR系列] 1.3 AutoSar 架构

依AutoSAR及经验辛苦整理&#xff0c;原创保护&#xff0c;禁止转载。 专栏 《深入浅出AutoSAR》 1. 整体架构 ​ 图片来源&#xff1a; AutoSar 官网 从官往图中可以看出autosar作为汽车ECU软件架构&#xff0c;是通过分层来实现软硬件隔离。就像大多数操作系统一样&#xff…

网络安全—自学笔记

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…

Spring Boot中RedisTemplate的使用

当前Spring Boot的版本为2.7.6&#xff0c;在使用RedisTemplate之前我们需要在pom.xml中引入下述依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><vers…

基于SSM的幼儿园管理系统

基于SSM的幼儿园管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 登录界面 管理员界面 摘要 基于SSM&#xff08;Spring、Spring MVC、MyBatis&#…

IDEA: 自用主题及字体搭配推荐

文章目录 1. 字体设置推荐2. 主题推荐3. Rainbow Brackets(彩虹括号)4. 设置背景图片 下面是我的 IDEA 主题和字体&#xff0c;它们的搭配效果如下&#xff1a; 1. 字体设置推荐 在使用 IntelliJ IDEA 进行编码和开发时&#xff0c;一个合适的字体设置可以提高你的工作效率和舒…

Fabric.js 图案笔刷

本文简介 带尬猴&#xff0c;我是德育处主任 Fabric.js 有图案画笔功能&#xff0c;这个功能可以简单理解成“刮刮卡”效果。 如果只是看 Fabric.js 文档可能还不太明白 图案画笔 PatternBrush 是如何使用。 本文将讲解如何配置这款画笔的基础属性。 图案画笔&#xff08;笔…

Kafka入门05——基础知识

目录 副本数据同步原理 HW和LEO的更新流程 第一种情况 第二种情况 数据丢失的情况 解决方案 Leader副本的选举过程 日志清除策略和压缩策略 日志清除策略 日志压缩策略 Kafka存储手段 零拷贝&#xff08;Zero-Copy&#xff09; 页缓存&#xff08;Page Cache&…

关于JAVA中字节码文件版本号、产品版本号及开发版本号的关系

目录 关于字节码版本对应关系清单关于字节码格式说明的资料关于这些版本号 关于字节码版本 以二进制打开字节码文件&#xff1a; 如上图中第5-8标识&#xff08;圈起来的&#xff09;的即字节码版本号 十六进制&#xff1a; 34 十进制&#xff1a; 52 jdk 8 对应关系清单 …

四、【常用的几种抠图方式三】

文章目录 钢笔工具抠图通道抠图蒙版抠图色彩范围抠图 钢笔工具抠图 钢笔工具抠图适合边缘比较硬的主体对象&#xff0c;因此适合需要精修而且边缘比较生硬的图片&#xff0c;钢笔工具操作比较多&#xff0c;对一般的新手来讲不是很友好&#xff0c;想要使用好钢笔工具需要经常…

5G与医疗:开启医疗技术的新篇章

5G与医疗&#xff1a;开启医疗技术的新篇章 随着5G技术的快速发展和普及&#xff0c;它已经在医疗领域产生了深远的影响。5G技术为医疗行业提供了更高效、更准确、更及时的通信方式&#xff0c;从而改变了医疗服务的模式和患者的体验。本文将探讨5G技术在医疗领域的应用场景、优…

JS问题:项目中如何区分使用防抖或节流?

前端功能问题系列文章&#xff0c;点击上方合集↑ 序言 大家好&#xff0c;我是大澈&#xff01; 本文约2300字&#xff0c;整篇阅读大约需要6分钟。 本文主要内容分三部分&#xff0c;第一部分是需求分析&#xff0c;第二部分是实现步骤&#xff0c;第三部分是问题详解。 …

CSS 基础知识-02

CSS 基础知识-01 1. flex布局2.定位3.CSS精灵4.CSS修饰属性 1. flex布局 2.定位 3.CSS精灵 4.CSS修饰属性

[③ADRV902x]: Digital Filter Configuration(接收端)

前言 本篇博客主要总结了ADRV9029 Rx接收端链路中各个滤波器的配置。配置不同的滤波器系数以及不同的参数&#xff0c;可以对输入的数字信号灵活得做decimation处理&#xff0c;decimation信号抽取&#xff0c;就是降低信号采样率的过程。 Receiver Signal Path 下图为接收端…

程序化广告系列之一---名词解释

基础 1、DSP&#xff1a;全称“Demand-Side Platform”&#xff0c;需求方平台&#xff0c;是为广告主、代理商提供一个综合性的管理平台&#xff0c;通过统一界面管理多个数字广告和数据交换账户。 2、SSP&#xff1a;SSP是Sell-Side Platform的缩写&#xff0c;即供应方平台…