springboot+avue导入excel文件_springboot vue excel导入

spring+vue导入excel文件并判断是否导入成功，成功则提示成功，失败则返回失败的数据使用一个弹出框回显数据

前端实现：

第一步：定义导入按钮

<el-button  size="medium" type="primary" @click="excelImportGaugeItem">导 入</el-button>

如下：

 

具体逻辑实现：

    //点击导入按钮
    excelImportGaugeItem(){
      //清空异常内容
      this.exceptionData = [];
      //清空文件
      this.uploadFile = {};
      //打开弹出框
      this.isOpenUpload = true;
    },

参数介绍：

isOpenUpload                true,false 控制页面显示 需要开始在return 里面定义false

uploadFile                  存放文件对象

exceptionData                存放异常信息，主要用来做导入失败，返回失败数据视图给用户看

第二步：点击导入按钮弹出文件上传

      <!-- 导入弹出框 -->
      <el-dialog :title="uploadTitle"
                 :visible.sync="isOpenUpload"
                 :close-on-click-modal="false"
                 width="600px"
                 append-to-body>
        <div style="display: flex; justify-content: center;">
          <el-upload
            :show-file-list="false"
            v-if="isOpenUpload"
            :http-request="handlerUploadFile"
            drag>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" style="text-align: center;" slot="tip">只能上传excel文件</div>
          </el-upload>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="handlerSubmitUpload">确 定</el-button>
        <el-button size="small" @click="handlerCloseOpenUpload">关 闭</el-button>
      </span>
      </el-dialog>

如下：

 

参数介绍：

uploadTitle        文件名回显，具体在计算属性函数里面处理

:http-request="handlerUploadFile        自定义文件处理

具体逻辑实现：

自定义文件处理，我们可以拿到文件的属性并做判断处理

    //这个方法可以获取到我们上传的文件，将名字文件赋值上去，并做文件判断
    handlerUploadFile(request) {
      //这里设置 只能上上传 pdf 的文件
      let fileName = request.file.name;
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      // console.log(lastName,lastName.toLowerCase());
      if (lastName.toLowerCase() !== ".xlsx") {
        this.$message.error("文件必须为.xlsx类型");
        this.uploadFile = {};
        return false;
      }
      //如果符合就添加到文件中去
      this.uploadFile = request.file;
    },

如图：

 上传后 文件名称回显：在计算属性函数里面处理：

//计算属性函数  
computed: {
    //处理回显文件名
    uploadTitle() {
      if (this.validatenull(this.uploadFile)) {
        return "上传";
      }
      return "当前文件：" + this.uploadFile.name;
    }
  },

如图：

 确认上传逻辑：

    //确认
    handlerSubmitUpload() {
      //判断文件是否为空
      if (this.validatenull(this.uploadFile)) {
        this.$message({type: "warning", message: "请上传文件"});
        return;
      }
      let formData = new FormData();
      formData.append("file", this.uploadFile);
      importGaugeItem(formData).then(res =>{
        let data = res.data.data;
        this.isOpenUpload = false;
        if (this.validatenull(data)) {
          this.$message({type: "success", message: "上传成功"});
          return;
        }
        //如果出现异常就进行打开异常的界面
        this.isOpenUploadException = true;
        this.exceptionData = data;
        console.log("异常回显信息",this.exceptionData)
      })
    },

关闭：

    //关闭
    handlerCloseOpenUpload() {
      this.isOpenUpload = false;
    },

第三步：导入失败后回显文件内容

如下：具体参数已后端返回为准

 

定义弹出组件

      <!-- 出现异常组件 -->
      <el-dialog title="异常数据"
                 :visible.sync="isOpenUploadException"
                 :close-on-click-modal="false"
                 width="80%"
                 append-to-body>
        <div style="display: flex; justify-content: center;">
          <gauge-upload-exception :data="exceptionData" v-if="isOpenUploadException"/>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handlerCloseUploadException">关 闭</el-button>
      </span>
      </el-dialog>

<gauge-upload-exception :data="exceptionData" v-if="isOpenUploadException"/>

注册该组件并使用，需要传递参数到组件中，exceptionData

具体 先定义空数组 -> exceptionData[] 在确认提交最后判断是否异常异常则把后端传递的异常数据存入该数组 -> 并传递到子组件中

子组件：

<template>
  <el-table
    :header-cell-style="{backgroundColor: 'rgb(239, 245, 255)'}"
    :cell-style="{'textAlign': 'center'}"
    :data="data"
    :border="true"
    :height="400"
    style="width: 100%">
    <el-table-column
      label="序号">
      <template slot-scope="scope">
        {{scope.$index + 1}}
      </template>
    </el-table-column>
    <el-table-column
      prop="gteCode"
      width="180"
      label="编号">
    </el-table-column>
    <el-table-column
      prop="sort"
      min-width="180"
      label="部门">
    </el-table-column>
    <el-table-column
      prop="error"
      min-width="180"
      label="异常原因">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  name: "gauge_upload_exception",
  //接收数据如果有就使用，如果没有就为空
  props:{
    data:{
      type:Object,
      default(){
        return []
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
    setTimeout(() => {
      this.$message({type: "warning", message: "导入数据部分异常"});
    }, 30);
  },
  // mounted(){
  //   console.log("测试组件")
  //   console.log(this.data)
  // }
}
</script>
 
<style scoped>
 
</style>

后端实现：

后端逻辑业务较复杂暂时不展示