技术标签: vue elementui json vue.js javascript
1、前端样式
2、上传成功后提示
3、上传的excel实例表
4、返回的Json数据
5、我修改成我的post接口参数格式
6、我的post接口返回的结果
第一步,导入xlsx.js依赖,打开终端,执行一下操作
cnpm install xlsx --s
第二步,在vue文件中添加以下代码就可以使用xlsx.js了
import xlsx form 'xlsx'
第三步,详细代码(我做成一个子组件,除了接口和json数据参数需要,根据你自己实际情况修改外,可以直接复制粘贴使用,代码都有注释)
<template>
<el-upload action=""
multiple :show-file-list="false"
style="display: contents"
accept=".xls,.XLS,.xlsx,.XLSX"
:limit="3"
:http-request="httpRequest">
<el-button type="primary" icon="el-icon-upload2">导入</el-button>
</el-upload>
</template>
<script>
import xlsx from 'xlsx'
import moment from 'moment/moment'
export default {
name: 'test5',
data () {
return {
jsondata: [], // 导入后转换成json
numbersuccess: 0, // 导入成功数
numberusered: 0, // 已存在数
resdata: []// 导入post请求返回的值
}
},
methods: {
httpRequest (e) {
let file = e.file // 文件信息
// 错误情况判断
if (!file) {
return false
} else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
this.$message.error('上传格式不正确,请上传xls或者xlsx格式')
return false
}
const fileReader = new FileReader()// 读取文件
fileReader.onload = (ev) => {
try {
const data = ev.target.result// 获取结果
// 获取所有表的信息
const workbook = xlsx.read(data, {
type: 'binary', // 以字符编码的方式解析
cellDates: true// 将excel中日期类型数据,转化为标准日期格式,而不是默认的数字格式
})
// 获取第一张表的表名
const exlname = workbook.SheetNames[0]
// 转换成json数据
const exl = xlsx.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
// 打印 ws 就可以看到读取出的表格数据
console.log(exl)
// 数据处理
this.submit_from(exl)
} catch (e) {
console.log('error')
return false
}
}
fileReader.readAsBinaryString(file)
},
// 数据处理成需要的格式
submit_from (data) {
// 遍历处理数据(根据你自己实际情况修改内容)
data.forEach((item) => {
let obj = {}
for (let i = 0; i <= data.length; i++) {
obj.id = item.账号
obj.name = item.用户名
obj.address = item.地址
obj.job = item.职业
obj.status = item.账号状态 === '启用' ? 'true' : 'false'
obj.birthday = moment(item.生日).format('YYYY-MM-DD')
}
// 赋值给参数jsondata
this.jsondata.push(obj)
})
console.log(this.jsondata)
// 遍历post请求添加数据到mysql(换成你自己的post接口)
this.jsondata.forEach((item) => {
this.$api.addgameuser(item.id, item.name, item.job, item.birthday, item.address, item.status, '')
.then((res) => {
this.resdata.push(res.data)// 返回添加结果
})
.catch((err) => {
console.log(err)
})
})
// 输出post请求结果
console.log(this.resdata)
// 提示添加成功数据的数量(延时处理)
setTimeout(() => {
// 对返回的结果做判断(我的接口返回true或者'exist_user',根据你自己实际情况配置)
for (var i = 0; i < this.resdata.length; i++) {
if (this.resdata[i] === true) {
this.numbersuccess = this.numbersuccess + 1// 成功数
} else if (this.resdata[i] === 'exist_user') {
this.numberusered = this.numberusered + 1// 已存在用户数
}
}
this.$alert('添加总数:' + this.jsondata.length + '------成功数:' + this.numbersuccess + '(其中' + this.numberusered + '名用户已存在,无需添加!)',
'上传结果',
{
confirmButtonText: '确定'
})
this.cleanresdata() // 初始化上传结果数据
// 如果有成功上传,刷新路由页面
if (this.numbersuccess > 0) {
this.$router.replace('/test3')
}
}, 1500)
},
// 初始化上传结果数据
cleanresdata () {
// eslint-disable-next-line no-unused-expressions,no-sequences
this.jsondata = [], // 导入后转换成json
this.numbersuccess = 0, // 导入成功数
this.numberusered = 0, // 已存在数
this.resdata = []
}
}
}
</script>
文章浏览阅读1k次。主要适用场景当要更新一条记录的时候,希望这条记录没有被别人更新乐观锁实现方式:取出记录时,获取当前version更新时,带上这个version执行更新时, set version = yourVersion+1 where version = yourVersion如果version不对,就更新失败乐观锁配置需要2步 记得两步1、插件配置spring xml<bean class="com.baomidou.mybatisplus.plugins.OptimisticLocke_mybatis mybatisplus 2.x 最稳定版本
文章浏览阅读5.2k次,点赞9次,收藏55次。python-docx 是用于创建和更新Microsoft Word(.docx)文件的Python库。它的API文档也非常简单,看完之后,只能简单理解一些基础用法。最近碰到一个需求,需要对word模版里的内容进行统一替换,替换内容比较多。从网上查到了很多种基于python-docx 的做法,但都有一定的缺陷,不能适用于各种场景。网上的做法整体是两种:相对比较好的解决办法:对runs中的内容进行一定程度的拼接,但是有缺点,部分文字的样式可能会消失,可以尽量让每一段文字的样式保持一致来避免这种情况。..._def replace_word(doc, tag, pv): # replace in paragraph
文章浏览阅读754次,点赞24次,收藏20次。1.背景介绍无监督学习是一种通过分析数据中的模式和结构来自动发现隐含结构的学习方法。它主要应用于数据竞争中,通过对数据的分类、聚类、降维等方式来提取数据中的知识。高斯混合模型(Gaussian Mixture Model, GMM)是一种常用的无监督学习方法,它假设数据是由多个高斯分布组成的混合分布,并通过估计这些高斯分布的参数来实现数据的聚类。在本文中,我们将详细介绍高斯混合模型在无监督...
文章浏览阅读173次。近年来,国家把科技自立自强作为国家发展的战略支撑,越来越多的行业企业将自主创新、自主研发作为发展的重中之重,以此增强企业的核心竞争实力。在今年发布的政府工作报告中,也对推动科技创新发展提出了众多战略要求。华云数据是中国云计算独角兽,自成立以来,始终坚持以技术创新为根本,坚持自主研发,至今已获得500余项知识产权。已经具备支持多芯多栈的解决方案,在复杂的混合IT架构背景下,可以为用户提供完整的数据中心云化、云上办公、信创转型和公有云方案。随着5G、云计算、大数据等技术的快速发展,以及移动办公、远程协作等._华云数据 体验最好的云桌面
文章浏览阅读564次。2021.8.8亲测有效https://zhuanlan.zhihu.com/p/77631369_coursera在中国能看吗
文章浏览阅读744次。这个题太恶心,一开始给想错了。光把分子分母看能否分别表示是不对的一组反例 8 3 14 表示 7:12 这时就需要加倍数,14:24却是可以分开表示的。 代码写的不好,有几个地方可以改动的 老规剧 题意: 给定一些数字 ,运用这些数字作乘除运算,看能不能得到指定比例。 分析 : 1. 把所给的数字能得到的最_cog-wheels解题思路
文章浏览阅读1.9k次,点赞2次,收藏4次。Winform检查窗体是否打开_winform判断窗体是否打开
文章浏览阅读1.9w次,点赞6次,收藏18次。解决方式:Win+R,输入services.msc,找到mysql服务即默认的服务名是mysql55而不是mysql直接输入mysql进入数据库报错这是因为系统并不知道mysql是什么,我们需要在环境变量里添加mysql的安装地址中的bin目录地址。C:\Program Files\MySQL\MySQL Server5.5\bin;..._mysql使用cmd语句打开不显示sql命令
文章浏览阅读7.2k次。如题:tensorflow.python.framework.errors_impl.UnknownError: Could not start gRPC server环境:Ubuntu16.4,tensorflow-gpu1.10原因:分布式tensorflow中的ps或者worker进程为杀死解决方案:ps -aux|grep python然后杀死和分布式有关的进程:..._tensorflow.python.framework.errors_impl.unknownerror: could not start grpc s
文章浏览阅读3k次。Python参考手册(第4版)》(David M.Beazley)电子书网盘下载免费在线阅读资源链接:链接: 提取码: kybr 书名:Python参考手册(第4版)作者:David M.Beazley译者:谢俊豆瓣评分:7.4出版社:人民邮电出版社出版年份:2010-12页数:540内容简介:本书是权威的Python语言参考指南,内容涉及核心Python语言和Python库的最重要部分。因此,它作为一个两卷本的合集中的第一本:《Learning Python》,也就是这本书,介绍Python本身。_python官方文档中文版下载
文章浏览阅读92次。Java EE 核心技术与应用基于最新的Java EE 6规范对Java EE应用开发技术进行系统讲解。书中主要包括四部分内容:第一部分介绍了Java EE的定义、设计思想、技术架构和开发模式等,可使读者全面认识Java EE。第二部分以Java EE企业应用的表现层、数据持久化层和业务逻辑层的开发为主线,重点讲解Java EE 6 规范的最新功能特性,包括JSF 2.0、Servlet3.0、E..._java ee高级技术及应用
文章浏览阅读1.1k次。facebook的开源梯度优化工具github:https://github.com/facebookresearch/nevergrad官方原文地址:https://code.fb.com/ai-research/nevergrad/Nevergrad: An open source tool for derivative-free optimizationMost machin..._nevergrad opt