vue 导入Excel 传给后端

// 第一步 安装 xlsx
npm i xlsx

// 第二步 页面引入
import xlsx from 'xlsx'

// 第三步 绘制页面
<div>
    <el-upload
        action
        accept='.xlsx'
        :auto-upload='false'
        :on-change='inputFile'
        :show-file-list='false'
     >
       <el-button
        type="primary"
        size="small"
        >导入Excel</el-button>
      </el-upload>
</div>

// 第四步 定义模板
data(){
  return {
     changeCnToEn: {
        '姓名': 'name',
        '年龄': 'age',
      },
     tableLIst :[]
  }
}

// 第五步 处理表格数据  发起请求  写在method中

// 把文件按照二进制方式读取
    readFile(file) {
      return new Promise(resolve => {
        let reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = ev => {
          resolve(ev.target.result)
        }
      })
    },
    // 导入文件
    async inputFile(e) {
      // console.log(e)
      this.inputFileName = e.name
      let file = e.raw
      if (!file) return
      // console.log(file)
      // 读取file文件的内容(转换为json格式)
      let data = await this.readFile(file)
      console.log(data) //解析出的二进制文件
      // type :'binary' 类型为二进制
      let eleData = xlsx.read(data, { type: "binary" })
      // console.log(eleData)
      let eleDataSheet = eleData.Sheets[eleData.SheetNames[0]]
      eleData = xlsx.utils.sheet_to_json(eleDataSheet) // 将解析出的数据转换为json格式（xlsx自带的方法）
      // eleData = eleData.length >1? eleData[1] : eleData[0]
      // console.log(eleData)
      const arr = []
      console.log(Object.keys(this.changeCnToEn))
      eleData.forEach(item => {
        const userInfo = {}
        //  console.log(Object.keys(item))
        Object.keys(item).forEach(key => {
          userInfo[this.changeCnToEn[key]] = item[key]
        })
        // console.log(userInfo)
        arr.push(userInfo)
      })
      this.tableLIst = arr
      console.log(arr) // 数组对象 就是Excel里的数据
      setTimeout(() => {
        this.lead()
      }, 500)
    },

   // 请求后端接口
    lead() {
      const leadData = {
        xxx: xxxx, // this.tableLIst 表格数据
      }
      request({
        url: '',
        method: 'get',
        params: leadData
      }).then(res => {
        console.log(res, 'res');
      })
    },

// 注意: 如果报错 TypeError: Cannot read properties of undefined (reading 'read')
// 先卸载 xlsx  npm uninstall xlsx
// 在安装适合版本  npm install xlsx@0.16.0 
// 重启项目