直接上代码，简单示例：
点击导入按钮，弹出导入弹窗；
template 部分的代码：
<div>
<el-button
class="filter-item"
style="margin-left: 10px; margin-bottom: 20px; height: 30px"
type="primary"
@click="importFile()"
>
导入调整下达表
</el-button>
</div>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="40%"
:before-close="importClose"
>
<div style="display: flex; align-items: center">
<a
herf="javaScript:;"
style="
font-weight: bold;
color: #d89a54;
margin-right: 10px;
margin-bottom: 18px;
font-size: 16px;
"
@click="downloadModel()"
>【模版下载】</a>
</div>
<div>
<el-form style="display: flex; align-items: center">
<el-form-item
label="导入年份"
label-width="88px"
class="importYearSty"
>
<el-date-picker
v-model="importYear"
value-format="yyyy"
clearable
type="year"
/>
</el-form-item>
<el-form-item label="导入月份" label-width="88px">
<el-select
v-model="importMonth"
placeholder="请选择"
style="width: 140px"
clearable
>
<el-option label="一月" value="一月"></el-option>
<el-option label="二月" value="二月"></el-option>
<el-option label="三月" value="三月"></el-option>
<el-option label="四月" value="四月"></el-option>
<el-option label="五月" value="五月"></el-option>
<el-option label="六月" value="六月"></el-option>
<el-option label="七月" value="七月"></el-option>
<el-option label="八月" value="八月"></el-option>
<el-option label="九月" value="九月"></el-option>
<el-option label="十月" value="十月"></el-option>
<el-option label="十一月" value="十一月"></el-option>
<el-option label="十二月" value="十二月"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<br /><br />
<div style="margin: 30px; padding-left: 100px; box-sizing: box-sizing">
<el-upload
ref="upload"
action="#"
:limit="1"
class="upload-demo"
drag
:on-change="handleChange"
:accept="accept"
:multiple="false"
:auto-upload="false"
>
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">
只能上传excel文件，且不超过100M
</div>
</el-upload>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="subMit">提交</el-button>
</span>
</el-dialog>data 部分的代码：
data() {
return {
// 导入excel文件配置
fileMIMEList: [
'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
''
],
// 可导入文件类型
accept: '.xls,.xlsx',
// 弹窗标题
title: '导入文件',
// 弹窗是否展示，默认不展示
dialogVisible: false,
file：null,
// 导入数据的月份
importMonth: '',
// 导入年份，默认当前年份
importYear: new Date().getFullYear().toString()
}
}引入的js:
import { getDiaLog } from '@/api/ims-demo/scProjInfo'; // 获取模板的方法
import axios from 'axios';
import { getCookieCode, getCookieToken } from '@/utils/auth'; // 获取token和codemethods 部分的代码：
// 点击导入按钮
importFile() {
if (this.$refs.upload) {
this.$refs.upload.uploadFiles = []
}
this.file = null
this.dialogVisible = true
this.title = '上传文件'
},
// 弹窗关闭按钮
importClose() {
this.dialogVisible = false
},
// 模板下载按钮
downloadModel() {
let modelKey = 'xxhsjdzbhxmxdb'
getDiaLog(modelKey).then((res) => {
const downloadbtn = document.createElement('a')
const url =
process.env.VUE_APP_BASE_IMS_EXT +
'f-center/hadoop/hdfs/download?path=' + res
downloadbtn.setAttribute('href', url)
downloadbtn.style.display = 'none'
document.body.appendChild(downloadbtn)
downloadbtn.click()
document.body.removeChild(downloadbtn)
})
},
// 导入成功时执行
async handleChange(file) {
if(!this.fileMIMEList.includes(file.raw.type)) {
this.$message.error(`请上传 ${this.accept} 的文件！`)
return false
}
const data = await this.readFile(file.raw)
const workbook = XLSX.read(data, {
type: 'binary',
cellDates: true
}) // 解析二进制格式数据
const worksheet = workbook.Sheets[workbook.SheetNames[0]] // 获取第一个Sheet
const result = XLSX.utils.sheet_to_json(worksheet) // json数据格式
this.file = result
},
readFile(file) {
// 文件读取
return new Promise((resolve) => {
const reader = new FileReader()
reader.readAsBinaryString(file) // 以二进制的方式读取
reader.onload = (ev) => {
resolve(ev.target.result)
}
})
},
// 提交按钮
subMit() {
let month = 1
switch (this.importMonth) {
case '一月':
month = 1
break
case '二月':
month = 2
break
case '三月':
month = 3
break
case '四月':
month = 4
break
case '五月':
month = 5
break
case '六月':
month = 6
break
case '七月':
month = 7
break
case '八月':
month = 8
break
case '九月':
month = 9
break
case '十月':
month = 10
break
case '十一月':
month = 11
break
case '十二月':
month = 12
break
}
const FormDatas = new FormData()
FormDatas.append('excelData', JSON.stringify(this.file))
FormDatas.append('timeScope', String(month))
FormDatas.append('year', String(this.importYear))
// importExcelData(this.file, this.activeTagName, new Date().getFullYear())
// 根据自己的项目如何调用接口决定，也可在 vueX 中获取登录保存的token和code
// getCookieToken 获取token，getCookieCode 获取code
axios({
method: 'post',
url: process.env.VUE_APP_BASE_IMS_BUSINESS +
'sm-scxxh/scProjInfo/importCommitExcelData',
headers: {
'Blade-Auth': getCookieToken(),
code: getCookieCode(),
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
timeout: 1000000,
data: FormDatas
}).then((response) => {
if(response.data.code == 200) {
this.$message({
title: '成功',
message: response.data.msg,
type: 'success',
duration: 2000
})
this.dialogVisible = false
// 导入完成，重新调取列表接口，重新渲染表格
this.getList()
} else {
this.$message({
title: '失败',
message: response.data.msg,
type: 'warning',
duration: 2000
})
this.dialogVisible = false
}
})
},有问题请留言。
