vue+element-UI+vue-elemnt-admin实现导入Excel（有图），并table动态回显
vue+element-UI+vue-elemnt-admin实现导入Excel（有图），并table动态回显
- 一、view
- 1.导入Excel
- 2. table动态回显数据，区分图片格式，对boolean类型的数据回显成中文（是/否）
- 二、js
- 三、踩过的坑
- 1.前端解析excel——>xlsx工具库。
- 2.java解析Excel的两种方式
一、view
1.导入Excel
代码中增加了回显sheet工作表的名称，目的在于与table中的数据联动。
<el-row :gutter="20" type="flex" justify="space-between">
<el-col :span="6">
<el-button type="danger" v-for="(item,index) in sheetNameArr" :key="index" @click.native="changeTable(index)">{{item}}</el-button>
</el-col>
<el-col :span="1" :offset="12">
<el-upload
class="upload-demo"
ref="upload"
action="doUpload"
:limit="1"
:before-upload="beforeUpload">
<el-button slot="trigger" size="middle" type="primary" style="margin-right: 20px">上传excel</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过5MB</div>-->
<!-- <div slot="tip" class="el-upload-list__item-name">{{fileName}}</div>-->
</el-upload>
</el-col>
<el-col :span="2">
<el-button type="success" @click="submitExcelData()" size="middle">提交数据</el-button>
</el-col>
</el-row>
2. table动态回显数据，区分图片格式，对boolean类型的数据回显成中文（是/否）
<el-table class="listTable_ele" :data="tableData" stripe height="650" style="width:100%" border >
<el-table-column v-for="(item,index) in tableHead[0]" :key="index" :prop="index" :label="item">
<template slot-scope="scope">
<img v-if="index == 'imgs'" v-for="itm in scope.row.imgs" :src="itm" width="40" height="40">
<img v-if="index === 'packPics'" :src="scope.row.packPics" width="scope.row.packPics!=''?50px:0" height="50px" >
<template v-else> {{ scope.row[scope.column.property]===true?"是":(scope.row[scope.column.property]===false?"否":scope.row[scope.column.property])}} </template>
</template>
</el-table-column> abel="item" align="center">
<el-table-column prop="operate" label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small" slot="reference" >编辑</el-button>
<!--<el-button type="text" size="small" @click="isEdit = !isEdit" icon="el-icon-edit">编辑</el-button>-->
</template>
</el-table-column>
</el-table>
二、js
beforeUpload(file){
console.log(file,'文件');
this.files = file;
console.log(this.files);
const extension = file.name.split('.')[1] === 'xls'
const extension2 = file.name.split('.')[1] === 'xlsx'
const isLt5M = file.size / 1024 / 1024 < 5
if (!extension && !extension2) {
this.$message.warning('上传模板只能是 xls、xlsx格式!')
return
}
if (!isLt5M) {
this.$message.warning('上传模板大小不能超过 5MB!')
return
}
this.fileName = file.name;
setTimeout(() => {
this.submitUpload();
},500);
return false; // 返回false不会自动上传
},
// 上传excel
submitUpload() {
let ts = this;
console.log('上传'+this.files.name)
if(this.fileName == ""){
this.$message.warning('请选择要上传的文件！')
return false
}
let fileFormData = new FormData();
fileFormData.append("code", "t_pathology_info_excel");
fileFormData.append("description", "excel上传测试");
//filename是键，file是值，就是要传的文件，test是要传的文件名
fileFormData.append('files', this.files, this.fileName);
let requestConfig = {
headers: {
'Content-Type': 'multipart/form-data'
},
}
// 执行上传excelfileList
// let id = '';
this.url = '/local/ExcelRead/upload';
this.$axios.post(this.url,fileFormData).then(res=>{
let excelDate = res.data.data;
let i=0;
for(var sheetName in excelDate){
let sheetData = excelDate[sheetName];
ts.sheetNameArr.push(sheetName) ;//存储sheet名称
if(i==0){
ts.tableData1 = sheetData;
ts.tableData = ts.tableData1;
}else{
ts.tableData2 = sheetData
}
i++;
}
}).catch((e) => {
this.$message.error("excel上传失败，请重新上传");
}).finally(() => {
});
},
三、踩过的坑
1.前端解析excel——>xlsx工具库。
存在问题：不能解析excel中的图片。
xlsx提供的方法：
2.java解析Excel的两种方式
- 传统的POI（强大，支持解析图片）——博主最终是采用这种方式实现的
- 阿里巴巴的EasyExcel（不支持解析图片，目前一直有新版本迭代，简易新颖）