技术标签: 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>
文章浏览阅读7.4k次。解决步骤:File -> SettingsEditor -> Code Style -> inspections -> Spelling -Typo 把勾选状态去掉,点击 OK即可_typo: in word 'bookindex' less... (ctrl+f1) inspection info: spellchecker in
文章浏览阅读1.1k次。1、登录自己的谷歌账户,随便搜索一个内容(如果没有账户,估计也在右上角有齿轮的地方,请找一下),选中更多设置。2、其他设置,选择“在新窗口中打开搜索结果”_谷歌浏览器打开新网页在新窗口打开
文章浏览阅读2.6k次。操作系统 调度算法_非剥夺式优先级调度算法
文章浏览阅读1.2k次。【代码】vue中 同步,异步获取后台数据并在另外的方法中调用该数据。_vue中success的结果传出
文章浏览阅读2.5w次,点赞53次,收藏292次。Web入门之VScode连接数据库sql server(超详细)今天我们终于开始连接数据库啦,作为一个登录页面,怎么能不连接我们已经建立好的school数据库呢,下面,我们一起来连接吧,非常简单哦。打开数据库第一步当然就是打开我们的数据库啦,以前我们可能常常使用本机地址一键登录,不过这次我们需要使用密码登录喽。身份验证这里我们选择SQL Server 身份验证,登录名一般默认都是sa,输入密码,密码我们之前设好过,如果忘记也没关系,是可以修改的,如果忘记的话,之后我会写一篇文章,介绍如何修改密码。_vscode连接sql server
文章浏览阅读253次。引言前阵子在w3ctech的走进名企 - 百度前端 FEX 专场上曾“夸下海口”说听完讲座后七天就可以打造自己的前端性能监控系统,既然说出去了也不能食言。从前一篇文章前端数据之美相信大家对前端数据有了一定的了解,下面就针对其中的性能数据及其监控进行详细阐述。开始行动本文中的性能主要指 web 页面加载性能,对性能还不了解?不用担心,接下来的“每一天”跟我一起进入前端性能的世界。Da..._用ssm搭建远程服务器性能监控系统
文章浏览阅读4.2w次,点赞246次,收藏2.1k次。目录1、美赛比赛网址及其介绍2、美赛摘要页说明3、美赛常用词语与语句4、美赛翻译注意事项5、美赛论文写作一些建议5.1 团队方面准备5.2 摘要表部分5.3 评委关注点6、组队要求7、软件与一些建模网址参考(1)写一篇建模文章大致需要如下技能:(2)数学建模算法总结(3) word小白教程数据资料:(4)1982—2018中国统计年鉴大全链接(5)美国人口普查数据大全链接(6)美国城市数据大全链接(7)全球统计数..._美赛资料
文章浏览阅读285次。概述:本文主要讲解了flutter网络请求三种方式 flutter自带的HttpClient、 第三方库http 和 第三方库Dio 的简单实现 GET 和 POST请求,本文是笔者学习Flutter网络模块知识总结,若有问题还望不腻赐教。一.系统自带HttpClient1.使用中温馨提示1.1.导入库import 'dart:io'; // 网络请求import 'dart:co..._flutter http.client和httpclient
文章浏览阅读2.2k次,点赞10次,收藏42次。滞后校正的实质是利用滞后网络幅值衰减特性,将系统的中频段压低,使校正后系统的截止频率减小,挖掘系统自身的相角储备来满足校正后系统的相角裕度要求_滞后校正设计
文章浏览阅读699次。现在使用自媒体工具进行头条号内容发布的自媒体人有很多,尤其是头条号作为自媒体主流平台,在各大平台里,所占的人数也具有一定的数量,很多人不是只运营头条号一个平台,其他的平台也有在运营。由于平台账号的增加,大多数人在内容分发上面花费的时间越来越多,这个时候大家就可以用到蚁小二自媒体工具,5分钟就可以把内容发布到多个平台,还能批量导入上百个账号,检测文章原创度。同时在给大家分享几个我们在自媒体运营中需要用到的小工具。1.找素材工具关于素材方面的工具,大家应该也见过很多,像易撰素材采集工具这.._多ip 多账号 多平台 文章自动发布 开源
文章浏览阅读991次。MD5计算将整个文件或者字符串,通过其不可逆的字符串变换计算,产生文件或字符串的MD5散列值。如果传入的是一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算。因为如果文件、字符串的MD5散列值不一样,说明文件内容也是不一样的。包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。通过slice方法,从blob1中创建出一个新的blob对象,size等于3。的一个下标,这个下标-1的对应的字节将会是被拷贝进新的。,其中 3 个用以读取文件,另一个用来中断读取。_miniio 分片写入文件
文章浏览阅读1.1w次,点赞53次,收藏214次。在华为od岗的薪资问题,并没有比市场上多多少,具体根据个人职级和绩效而定,初入职场的应届生薪资大概在20K-30K左右,相对于其他行业来说,华为的起薪是比较高的。华为OD机试通常由多个题目组成,包括算法设计、编程、调试等多个环节,考察候选人的基础知识、实际能力和算法编写能力等多个方面,是华为招聘流程中非常重要的一环。大家有什么不懂的,想看的,都可以留言,或者私信哪吒。总的来说,OD岗位的晋升空间相对较广,但是需要候选人不断提升自身能力,积极参与公司的内部培训和发展计划,才能在职业生涯中获得更好的发展机会。_华为机试