quasar获取上传Excel数据(q-uploader解析并上传)

1、安装

npm install xlsx

2、引入(xlsx版本不断更新,在官网https://www.npmjs.com/package/xlsx找得到正确的引用方法)

import * as XLSX from 'xlsx/xlsx.mjs';

3、实例

<template> 

<div>

<q-uploader label="上传" accept=".xls,.xlsx" @added="added" @uploading="uploading"  auto-expand hide-upload-button/>

</div>

</template>

<script>

import * as XLSX from 'xlsx/xlsx.mjs';

data(){

return {}

},

methods: {

uploading(val){

console.log(val.xhr.response);//上传excel文件完后台返回的数据

},

added(val) {

let fileName = '';//excel文件名

//文件是否存在

if (val.length <= 0) {

return false;

} else if (!/\.(xls|xlsx)$/.test(val[0].name.toLowerCase())) {

//excel判断是不是excel，不是则提示用户文件格式不正确

this.$q.notify({ position: 'center', type: 'negative', message: '上传格式不正确，请上传xls或者xlsx格式', timeout: 3000 });

return false;

} else {

//如果是excel文件则获取文件名给上面的变量

// 更新获取文件名

fileName = val[0].name;

console.log(fileName)

}

const fileReader = new FileReader();//创建读excel的对象

fileReader.onload = ev => {

try {

const data = ev.target.result;//数据集

const workbook = XLSX.read(data, { type: 'binary' });//二进制方式读

let bookName = workbook.SheetNames[0];//获取excel第一个工作簿的名称

let ws = workbook.Sheets[bookName];//获取工作簿下的数据

// //const d = XLSX.utils.sheet_to_json(ws);//数据转化成JS数组对象（不带第一行(表头)的数据）

// //数据转化成JS数组对象（带第一行(表头)的数据）

const d = XLSX.utils.sheet_to_json(ws, { header: 1 });

//解析的结果

console.log(d);

} catch (e) {

this.$q.notify({ position: 'center', type: 'negative', message: '表格解析失败！', timeout: 3000 });

return false;

}

};

fileReader.readAsBinaryString(val[0]);

},

}

}

</script>