vue+element-UI+vue-elemnt-admin实现导入Excel（有图），并table动态回显

一、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（不支持解析图片，目前一直有新版本迭代，简易新颖）