Vue导入excel

import XLSX from "xlsx";
<template>
  <div class="import-excel">
    <el-upload class="upload-demo" ref="upload" :auto-upload="false" :limit="1" :on-change="excleHandle" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" :on-remove="handleRemove">
      <el-button slot="trigger" type="primary">选取文件</el-button>

    </el-upload>
  </div>
</template>

<script>
import XLSX from "xlsx";
export default {
  data: function () {
    return {
      fileTemp: ''
    }
  },
  methods: {
    handleRemove(file, fileList) {
      this.fileTemp = null
    },
    excleHandle(file, fileList) {
      let _self = this;
      this.fileTemp = file.raw
      let fileName = file.raw.name
      let fileType = fileName.substring(fileName.lastIndexOf('.') + 1);
      // 判断上传文件格式
      if (this.fileTemp) {
        if ((fileType == 'xlsx') || (fileType == 'xls')) {
          const reader = new FileReader();
          reader.onload = function (e) {
            const data = e.target.result;
            this.wb = XLSX.read(data, {
              type: "binary"
            });
            const result = [];
            this.wb.SheetNames.forEach(sheetName => {
              result.push({
                sheetName: sheetName,
                sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
              });
            });
            _self.$emit('success', result[0].sheet)


          };
          reader.readAsBinaryString(file.raw);
        } else {
          this.$message({
            type: 'warning',
            message: '附件格式错误，请删除后重新上传！'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请上传附件！'
        })
      }

    },
  }
}
</script>

<style scoped lang="scss">
.import-excel {
}
</style>