/** * @description: 导入excel并进行数据提取 * @param {type} * @return: */ Vue.prototype.$importExcel = function (file, header) { let _this = this; return new Promise(function (resolve, reject) { const types = file.name.split('.')[1] const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types) if (!fileType) { _this.$message({ type: "warning", message: "文件格式不正确,请重新选择!" }); reject(); } const reader = new FileReader(); reader.onload = function (e) { const data = e.target.result; this.wb = XLSX.read(data, { type: "binary" }); const wsname = this.wb.SheetNames[0]; const ws = this.wb.Sheets[wsname]; /* Convert array of arrays */ const sheetJson = XLSX.utils.sheet_to_json(ws); let tableData = []; //转换为真正的table所需要的数据 for (let item of sheetJson) { let obj = {}; for (let key in item) { for (let childItem of _this.header) { if (key === childItem.label) { obj[childItem.prop] = item[key]; break; } } } tableData.push(obj); } resolve(tableData); }; reader.readAsBinaryString(file.raw); }); }
<template> <div> <el-upload class="upload-demo" ref="upload" :auto-upload="false" :on-change="change" > <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" >上传到服务器</el-button> </el-upload> </div> </template> <script> </script> import XLSX from "xlsx"; export default { methods: { submitUpload() { this.$refs.upload.submit(); }, change(file) { this.$importExcel(file, this.header).then(tableData => { console.log(tableData); }); }, } }