ElementUI中的批量导入组件

 

组件源码：

<template>
<div>
<el-upload class="upload-demo"
v-loading="loading"
ref="uploadComs"
name="importFile"
:limit="1"
:on-change="handleChange"
:on-success="handleSuccess"
:show-file-list="false"
:auto-upload="false"
:on-exceed="handleExceed"
:with-credentials="true"
:action="getActionUrl()">
<!-- <i class="el-icon-upload"></i> -->
<!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
<el-button size="mini" type="primary">批量导入</el-button>
<!--<div class="el-upload__tip" slot="tip">请下载模板文件并填写后上传</div>-->
</el-upload>
</div>
</template>

<script>
import XLSX from 'xlsx'
import {Message} from 'element-ui';

export default {
name: "uploadTemplateComs",
props: {
beforeUpload: Function, // eslint-disable-line
onSuccess: Function, // eslint-disable-line
// dynamicActionUrl: Function,
getResponseData: Function,
clearTableData: Function,
},
data() {
return {
loading: false,
excelData: {
header: null,
results: null,
},
}
},
methods: {
clearFile(){
console.log('数据已清理');
this.$refs.uploadComs.clearFiles();//清空已上传的文件
},
handleSuccess(response, file, fileList) {
this.$refs.uploadComs.clearFiles();//清空已上传的文件
this.getResponseData && this.getResponseData(response, file, fileList);
},
generateData({header, results}) {
this.excelData.header = header
this.excelData.results = results
this.onSuccess && this.onSuccess(this.excelData)
},
submitUpload() {
this.$refs.uploadComs.submit()
//beforeUpload返回false时，不执行submit方法，需要调用以下方法，继续上传文件
// this.$refs.uploadComs.$children[0].post(this.excelFile);
},
handleRemove(file, fileList) {
//父组件方法清空excel的预览表格
this.clearTableData && this.clearTableData()
},
handleExceed(files, fileList) {

Message({
message: '已选择 【' + files[0].name + '】,一次只能批量一个文件',
type: 'warning',
duration: 4 * 1000
})
},
handleChange(file, fileList) {
if (file.status == "ready") { //仅上传时处理
let excel = file.raw;
if (!this.isExcel(excel)) {
Message.error('仅支持 .xlsx 结尾的文件')
Message({
message: '仅支持 .xlsx 结尾的文件',
type: 'error',
duration: 4 * 1000
})
return false
}
this.upload(excel)
}
},
getActionUrl() {
// return "http://localhost:9002/api/info/batchImport/sysUser";
// return this.dynamicActionUrl && this.dynamicActionUrl();
},
upload(rawFile) {
if (!this.beforeUpload) {
this.readerData(rawFile);
} else {
const before = this.beforeUpload(rawFile);
if (before) {
this.readerData(rawFile)
}
this.importLoading = false;
}
},
readerData(rawFile) {
this.loading = true
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const workbook = XLSX.read(data, {type: 'array'});
const firstSheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[firstSheetName]
const header = this.getHeaderRow(worksheet)
let results = XLSX.utils.sheet_to_json(worksheet)
/* if (results.length > 5000) {
results = results.splice(0, 500);
console.log("文件行数大于5000");
} else {
console.log("文件行数=" + results.length);
}*/
this.generateData({header, results});
resolve()
}
reader.readAsArrayBuffer(rawFile)
this.loading = false
})
},
getHeaderRow(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let C
const R = range.s.r
/* start in the first row */
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
const cell = sheet[XLSX.utils.encode_cell({c: C, r: R})]
/* find the cell in the first row */
let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
},
isExcel(file) {
// return /\.(xlsx|xls|csv)$/.test(file.name)
return /\.(xlsx)$/.test(file.name)
}
}
}
</script>
<style scoped>
.upload-demo {
float: right;
width: 100px;
margin-top: -20px;
}
</style>

 

父组件调用代码：

 

<importExcel
v-if="flag"
:on-success="handleSuccess"
ref="uploadTemplateComs"
:getResponseData="callBackImport"
:clearTableData="clearTableData">
</importExcel>