vue excel导入：暂时利用本地存储来做的

记得导入 js部分文件：juejin.cn/post/704339…

<template>
  <div class="uploadBox">
    <!-- 上传文件按钮 -->
    <div class="buttonBox">
      <el-upload
        action
        accept=".xlsx, .xls"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="handle"
      >
        <el-button type="primary" slot="trigger">选取 Excel 文件</el-button>
      </el-upload>
    </div>

    <!-- 解析出来的数据 -->
    <div class="tableBox">
      <el-table
        :data="tempData"
        @selection-change="selectionChange"
        style="width: 100%,height:100px"
      >
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" min-width="50%"></el-table-column>
        <el-table-column prop="organization" label="所属机构" min-width="50%"></el-table-column>
        <el-table-column prop="department" label="所属部门" min-width="50%"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import xlsx from 'xlsx'
import { Loading } from 'element-ui'
import { importUserlist } from '../api/index'
import { readFile, character, delay } from '../assets/js/utils'
export default {
  name: 'Upload',
  data() {
    return {
      tempData: [],
      show: false,
      // 选中数据
      selectionList: []
    }
  },
  created() {
    this.queryData()
  },
  methods: {
    // 采集 EXCEL 数据
    async handle(e) {
      let file = e.raw
      if (!file) return

      this.show = false
      let loading = Loading.service({
        text: '小主，请您稍等片刻，女家正在玩命处理中...',
        background: 'rgba(0,0,0,.5)'
      })

      await delay(300)

      // 读取FILE中的数据
      let data = await readFile(file)
      let workbook = xlsx.read(data, { type: 'binary' }),
        worksheet = workbook.Sheets[workbook.SheetNames[0]],
        list = xlsx.utils.sheet_to_json(worksheet)

      // 把读取出来的数据变为可以提交为服务器的数据格式
      let arr = []
      let oldData = JSON.parse(window.localStorage.getItem('excel') || '[]')
      let index = oldData.length
      list.forEach(item => {
        let obj = {}
        for (let key in character) {
          if (!character.hasOwnProperty(key)) break
          let v = character[key],
            text = v.text,
            type = v.type
          v = item[text] || ''
          type === 'string' ? (v = String(v)) : null
          type === 'number' ? (v = Number(v)) : null
          obj[key] = v
        }
        obj.id = ++index
        obj.time = new Date()
        arr.push(obj)
      })

      await delay(300)

      // 展示到页面中
      this.show = true
      // console.log(arr)
      this.tempData = arr
      loading.close()
      this.submit()
    },
    // 提交数据给服务器
    // 方式一：本地存储的写法
    // submit() {
    //   if (this.tempData.length <= 0) {
    //     return this.$message({
    //       message: '小主，请您先选择 EXCEL 文件！',
    //       type: 'warning',
    //       showClose: true
    //     })
    //   }
    //   // 方式一：本地存储的写法
    //   let oldData = JSON.parse(window.localStorage.getItem('excel') || '[]'),
    //     newData = [...oldData, ...this.tempData]
    //   window.localStorage.setItem('excel', JSON.stringify(newData))
    //   this.queryData()

    // },

    // 方式二：把数据一次性传给后端,请求接口
    // async submit() {
    //   if (this.tempData.length <= 0) {
    //     return this.$message({
    //       message: '小主，请您先选择 EXCEL 文件！',
    //       type: 'warning',
    //       showClose: true
    //     })
    //   }
    //   let result = await importUserlist(this.tempData)
    //   if (parseInt(result.code) === 0) {
    //     this.$message.success('导入成功')
    //   }
    // },

    // 方式三：将数据一条条传给后端服务器
    // async submit() {
    //   if (this.tempData.length <= 0) {
    //     return this.$message({
    //       message: '小主，请您先选择 EXCEL 文件！',
    //       type: 'warning',
    //       showClose: true
    //     })
    //   }
    //   let conplate = () => {
    //     return this.$message({
    //       message: '小主，数据上传成功！',
    //       type: 'success',
    //       showClose: true
    //     })
    //   }
    //   let n = 0
    //   let send = async () => {
    //     if (n > this.tempData.length - 1) {
    //       // 都传递完了
    // 			conplate();
    //       return
    //     }
    //     let body = this.tempData[n]
    //     let result = await importUserlist(body)
    //     if (parseInt(result.code) === 0) {
    //       // 成功
    //       n++
    //     }
    //     send()
    //   }
    // },

    //方式一的： 获取本地数据
    queryData() {
      let data = window.localStorage.getItem('excel') || '[]'
      this.tempData = JSON.parse(data)
    },
                // 选中的数据
    selectionChange(val) {
      this.selectionList = val
      console.log(this.selectionList, 111)
    }
  }
}
</script>

<style lang="less" scoped>
.homeBox {
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 9999;
  font-size: 40px;
}

.buttonBox {
  padding: 15px;
  display: flex;
  width: 35%;
  justify-content: flex-start;
  & .el-button {
    margin-right: 20px !important;
  }
}

.tableBox {
  padding: 0 15px;
  h3 {
    font-size: 18px;
    color: #f56c6c;
    padding-bottom: 15px;
  }
}
</style>