Vue2使用el-upload做excel上传导入功能

1、安装插件

npm install xlsx
或
yarn add xlsx

2、页面引入使用

<el-upload :auto-upload="false" :before-remove="beforeRemove" :file-list="fileList" :on-change="handleChange" :on-remove="handleRemove" :show-file-list="true" accept=".xlsx, .xls" action class="upload-box">
	<el-button size="small" type="primary">点击上传</el-button>
	<div class="el-upload__tip" slot="tip" v-show="!fileList[0]">未选择任何文件</div>
	<div slot="tip" class="el-upload__tip">仅支持.xlsx, .xls类型文件</div>
</el-upload>

<script>
	import * as XLSX from 'xlsx/xlsx.mjs'
	export default {
		data() {
			return {
				lastUid: null,
				fileList: [],
			}
		},
		methods: {
			async handleChange(ev, fileList) {
				if (fileList.length > 0) {
					this.fileList = [fileList[fileList.length - 1]]
				} else {
					this.fileList = fileList[0]
				}
				let file = ev.raw
				if (this.lastUid == file.uid) {
					return
				}
				this.lastUid = file.uid
				if (file) {
					console.log(file)
					if (
						file.name.indexOf('.xls') != -1 ||
						file.name.indexOf('.xlsx') != -1
					) {
						let data = await this.readFile(file)
						let workbook = XLSX.read(data, {
							type: 'binary',
							cellDates: true
						})
						let worksheet = workbook.Sheets[workbook.SheetNames[0]]
						let secondsheet = workbook.Sheets[workbook.SheetNames[1]]
						let resultExcel = XLSX.utils.sheet_to_json(worksheet)
						let tableHead = Object.keys(resultExcel[0]);
						console.log(resultExcel, '解析后表格数据')
				        console.log(tableHead, '解析后表格头')
					}
				}
			},
			readFile(file) {
				return new Promise(resolve => {
					let reader = new FileReader()
					reader.readAsBinaryString(file)
					reader.onload = ev => {
						resolve(ev.target.result)
					}
				})
			},
			handleRemove(file, fileList) {
				this.fileList = []
				this.resultExcel = []
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${file.name}？`)
			},
		}
	}
</script>

3、封装全局组件globalUpload.vue

在components文件夹下新建globalUpload.vue

<template>
	<div>
		<el-upload :auto-upload="false" :before-remove="beforeRemove" :file-list="fileList" :on-change="handleChange"
			:on-remove="handleRemove" :show-file-list="true" accept=".xlsx, .xls" action class="upload-box">
			<el-button size="small" type="primary">点击上传</el-button>
			<div class="el-upload__tip" slot="tip" v-show="!fileList[0]">未选择任何文件</div>
			<div slot="tip" class="el-upload__tip">仅支持.xlsx, .xls类型文件</div>
		</el-upload>
	</div>
</template>

<script>
	import * as XLSX from 'xlsx/xlsx.mjs'
	export default {
		data() {
			return {
				lastUid: null,
				fileList: [],
			}
		},
		methods: {
			async handleChange(ev, fileList) {
				if (fileList.length > 0) {
					this.fileList = [fileList[fileList.length - 1]]
				} else {
					this.fileList = fileList[0]
				}
				let file = ev.raw
				if (this.lastUid == file.uid) {
					return
				}
				this.lastUid = file.uid
				if (file) {
					console.log(file)
					if (
						file.name.indexOf('.xls') != -1 ||
						file.name.indexOf('.xlsx') != -1
					) {
						let data = await this.readFile(file)
						let workbook = XLSX.read(data, {
							type: 'binary',
							cellDates: true
						})
						let worksheet = workbook.Sheets[workbook.SheetNames[0]]
						let secondsheet = workbook.Sheets[workbook.SheetNames[1]]
						let resultExcel = XLSX.utils.sheet_to_json(worksheet)
						let tableHead = Object.keys(resultExcel[0]);
						this.$emit('handleChange',{
							resultExcel,
							tableHead
						})
					}
				}
			},
			readFile(file) {
				return new Promise(resolve => {
					let reader = new FileReader()
					reader.readAsBinaryString(file)
					reader.onload = ev => {
						resolve(ev.target.result)
					}
				})
			},
			handleRemove(file, fileList) {
				this.fileList = []
				this.resultExcel = []
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${file.name}？`)
			},
		}
	}
</script>

<style lang="scss" scoped></style>

4、全局注册：main.js文件引入注册

import globalUpload from './components/globalUpload.vue';
Vue.component('global-upload', globalUpload);

5、单页面使用：

<template>
	<div>
		<global-upload @handleChange='handleChange'></global-upload>
		<el-table :data="resultExcel" style="width: 100%" v-if="resultExcel.length > 0" border max-height="600">
			<el-table-column v-for="column in tableHead" :key="column" :prop="column" :label="column" show-overflow-tooltip>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		name: 'sailSoft',
		data() {
			return {
				resultExcel: [], //解析后表格数据
				tableHead: [], //动态表头数据
			}
		},
		methods: {
			handleChange(e){
				this.resultExcel = e.resultExcel
				this.tableHead = e.tableHead
				console.log(this.resultExcel, '解析后表格数据')
				console.log(this.tableHead, '解析后表格头')
			}
		}
	}
</script>

<style lang="scss" scoped></style>