VUE中 上传excel文件并解析，将解析内容以数组方式传递给后端（可排序excel表内容）

 在VUE框架下搭建，<template>内容

<template>
  <div>      
  <el-upload class="upload-demo" drag 
  action="http://127.0.0.1:3344/file" 
  accept=".xlsx" :on-exceed="exceed":limit="1" :on-remove="remove" :before-upload="beforeUpload">    
  <i class="el-icon-upload"></i>     
  <div class="el-upload__text">   
  将文件拖到此处，或       
  <em>点击上传</em>     
  </div>  

  <div class="el-upload__tip" slot="tip">1次只能上传1个xls文件，且不超过500kb</div>   
  
  
  </el-upload>  

  <el-card class="preview-excel" v-show="listTable.length != 0" style="margin-top: 20px;">     
  
  <el-table class="listTable_ele" align="center" :data="listTable" stripe height="500px" style="width:100%">   
  <el-table-column prop="name" label="姓名" width="200" align="center"></el-table-column>  
  <el-table-column prop="age" label="年龄" width="200" align="center" sortable></el-table-column>      
  <el-table-column prop="city" label="城市" width="200" align="center"></el-table-column>    
  <el-table-column prop="sno" label="学号" width="200" align="center"></el-table-column>     
  </el-table>    
     <el-button @click="remove()">取 消</el-button>
        <el-button
          type="primary"
          @click="importExcel()"
        >确 定</el-button>
  </el-card>  
 
  </div>
  </template>

<script>内容

<script>    
import { selectMesAdviceList, importExl, getDetails, saveMesPlan } from '@/api/plan/mesAdivce'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import waves from '@/directive/waves' // 水波纹指令
 
  import XLSX from "xlsx";  //引入xlsx 
  export default {    
       data() { 
 	   return {     
     	   listTable: []   
		      };    
		   }, 
  methods: {      //解析excel      async
  
  uploadFile(file) {   
     const _file = file;  
     const fileReader = new FileReader();     
     fileReader.onload = (ev) => {         
     try {          
     const data = ev.target.result;         
     const workbook = XLSX.read(data, {       
      type: 'binary'     
	  });        
  for (let sheet in workbook.Sheets) {              //循环读取每个文件          
       const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);              //若当前sheet没有数据，则continue      
  if (sheetArray.length == 0) {           
       continue;      
  }     
   console.log("读取文件");              // console.log(sheetArray);       
   for (let item in sheetArray) {        
    let rowTable = {};                //这里的rowTable的属性名注意要与上面表格的prop一致              
   //sheetArray的属性名与上传的表格的列名一致        
  rowTable.name = sheetArray[item].姓名;       
  rowTable.age = sheetArray[item].年龄;       
  rowTable.city = sheetArray[item].城市;      
  rowTable.sno = sheetArray[item].学号;         
  this.listTable.push(rowTable);           
  }         
  console.log(this.listTable)       
  }       
  }
  catch (e) {    
  this.$message.warning('文件类型不正确！');      
  }    
  };   
  fileReader.readAsBinaryString(_file);    
  },      //上传1个以上文件时弹窗提示错误   
 
  // 取消导入
  //handleClose(done) {
    //  this.dialogVisible = false
    //},
 // 确认导入
    importExcel() {
      debugger
      importExl(this.listTable).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500
          })
          this.selectMesAdviceList(this.parameterDto)
        }
      })
      this.dialogVisible = false
    },
 
  exceed: function () {     
  this.$message.error("最多只能上传1个xls文件");    
  },    
  //删除文件      
  remove() {       
  this.listTable = [];  
  },      
  // 上传文件前   
  beforeUpload(file) {      
      // console.log(file)       
     this.uploadFile(file)        
     return false      }    
  }  
  };
  </script>

效果图：

增加上传文件名称file.name放到list中

取消、确认按钮已经实现

取消即：删除remove文件

确认：调用方法进入后端，将excel数据以数组形式进入方法传递进表