基于vue-element的el-upload文件导入数据处理
<template>的组件使用
<template> <div> <div class="grid-content bg-purple-dark"> <div class="demo-input-suffix"> { { $t(文件导入) }}: <!-- 按钮 --> <el-upload :multiple="false" :show-file-list="false" :http-request="httpRequest" class="upload" action="" accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"> <el-button >{ { $t(选择文件) }}</el-button> <el-tooltip :content="$t(文件大小不超过5M,支持.xlsx文件格式;文件内容为一列手机号码。示例: 手机号码 13671873945 13768426384)" class="item" effect="dark" placement="top"> <i class="el-icon-question"/> </el-tooltip> </el-upload> <el-button type="text" @click="downloadTemplate">{ { $t(下载模板) }}</el-button> <!-- 按钮 end --> </div> </div> </div> </template>
util.js处理导入的文件,获取文件数据。这里使用Promise,主要是通过resolve(exl),在回调函数里面添加处理逻辑。其中exl就是回调函数的入参
// 读取导入的 Excel数据,fileReader.onload是异步方法,使用回调函数获取值 // utils.httpRequest(e).then(function (exl) { // if (exl && exl.length > 0) { // } // }); httpRequest(e) { return new Promise(function(resolve, reject) { // 文件对象 const 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.readAsBinaryString(file) fileReader.onload = (ev) => { try { const data = ev.target.result const workbook = XLSX.read(data, { type: binary // 以字符编码的方式解析 }) const exlname = workbook.SheetNames[0] // 取第一张表 const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容 resolve(exl) } catch (e) { console.log(出错了::) return false } } }) },
js交互,在回调函数里面完成后续逻辑处理
// 读取导入的表格数据 httpRequest(e) { var self = this utils.httpRequest(e).then(function(excelDataList) { // 总导入用户数 var memberCount = excelDataList.length ....... }) },
导入文件
回调函数的入参excelDataList:
[ {"手机号码":12000000058}, {"手机号码":12000000061}, {"手机号码":12000000063}, {"手机号码":12000000066} ]
上一篇:
IDEA上Java项目控制台中文乱码