一、目的:在vue+element-ui中实现解析上传的文件内容,优化用户体验
二、安装xlsx包:npm install xlsx
三、导入xlsx:import XLSX from 'xlsx'
四、开始使用
校验代码:
beforeUpLoad(file) { let _this = this; // 使返回的值变成Promise对象,如果校验不通过,则reject,校验通过,则resolve return new Promise(function(resolve, reject){ // readExcel方法也使用了Promise异步转同步,此处使用then对返回值进行处理 _this.readExcel(file).then(result => {// 此时标识校验成功,为resolve返回 if (result) resolve(result); }) }); },
解析xlsx文件
readExcel(file) {// 解析Excel let _this = this; return new Promise(function(resolve, reject){// 返回Promise对象 const reader = new FileReader(); reader.onload = (e) => {// 异步执行 try { // 以二进制流方式读取得到整份excel表格对象 let data = e.target.result,workbook = XLSX.read(data, {type: 'binary'});