excel文件上传问题?

我在点击导入学生时,上传excel文件总是会报Uncaught ReferenceError: XLSX is not defined
at FileReader.reader.onload的错误是什么原因导致的?求指点

代码如下:

//导入
    importExcel(obj) {
      if (this.classId == "" || this.classId == null) {
        this.$message({
          type: "info",
          message: "请选择要导入学生数据的班级",
        });
      } else {
        if (!obj.files) {
          //导入的数据
          return;
        }
        let file = obj.files[0], //导入的数据
          types = file.name.split(".")[1], //拿到类型
          fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
            (item) => item === types
          );
        if (!fileType) {
          alert("格式错误!请重新选择");
          return;
        }
        this.file2Xce(file).then((tabJson) => {
          //tabJson就是解析出来的json数据,数据格式如下
          if (tabJson && tabJson.length > 0) {
            console.log(tabJson)
            this.file3cex(tabJson);
          } else {
            alert("导入数据为空!!!");
          }
        });
      }
    },
    file2Xce(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader(); //创建FileReader对象,将文件内容读入内存,通过一些api接口,可以在主线程中访问本地文件
        reader.onload = function (e) {
          //onload    当读取操作成功完成时调用
          let data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary", //二进制
          });
          // XLSX.utils.json_to_sheet(data) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表,默认的列顺序由使用Object.keys的字段的第一次出现确定
          resolve(
            XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]])
          );
        };
        reader.readAsBinaryString(file); //    异步按字节读取文件内容,结果为文件的二进制串
      });
    },
    file3cex(obj) {
      var data = obj.map((el) => {
        if (this.testingData(el)) {
          let obj = {};
          obj.name = el.学生姓名;
          if (el.学生性别 == "男") {
            obj.sex = 1;
          } else {
            obj.sex = 2;
          }
          obj.age = el.年龄;
          obj.studentNumber=el.学号;
          obj.role = 3;
          obj.phone = el.联系电话;
          obj.address = el.家庭住址;
          obj.account = el.学生账号;
          obj.password = el.学生密码;
          obj.remark = el.备注;
          obj.classId = this.classId;
          obj.flag = 0;
          obj.cardId = el.身份证号;
          return obj;
        }
      });

      var addDate = [];
      for (var j = 0; j < data.length; j++) {
        if (data[j] != undefined) {
          var zh = new String(data[j].account);
          var mm = new String(data[j].password);
          if (zh.length >= 6 && mm.length >= 6) {
            addDate.push(data[j]);
          }
        }
      }

      if (addDate.length > 0) {
        const res = new Map();
        //根据属性去重
        var studata = addDate.filter(
          (a) => !res.has(a.account) && res.set(a.account, 1)
        );
        var info = "";
        for (var m = 0; m < studata.length; m++) {
          info = info + "--" + studata[m].name;
        }
        this.axios
          .batchStudentInfo(studata)
          .then((res) => {
            if (res.data.code == 101) {
              if (res.data.data > 0) {
                this.$notify({
                  title: "数据导入提示",
                  message:
                    "成功导入" +
                    studata.length +
                    "条学生数据(" +
                    info +
                    ")。" +
                    (data.length - studata.length) +
                    "条学生数据导入失败!!",
                  duration: 0,
                });
              } else {
                this.$message({
                  type: "error",
                  message: "学生数据导入失败!!",
                });
              }
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          })
          .then((err) => {});
      } else {
        this.$message({
          type: "info",
          message: "导入的学生数据异常导入失败!!",
        });
      }
    },
    testingData(obj) {
      var state = true;
      if (
        obj.学生姓名 == "" ||
        obj.学生姓名 == null ||
        obj.学生姓名 == undefined
      ) {
        state = false;
      } else if (
        obj.学生性别 == "" ||
        obj.学生性别 == null ||
        obj.学生性别 == undefined
      ) {
        state = false;
      } else if (obj.年龄 == "" || obj.年龄 == null || obj.年龄 == undefined) {
        state = false;
      } else if (
        obj.学生账号 == "" ||
        obj.学生账号 == null ||
        obj.学生账号 == undefined
      ) {
        state = false;
      } else if (
        obj.学生密码 == "" ||
        obj.学生密码 == null ||
        obj.学生密码 == undefined
      ) {
        state = false;
      }
      return state;
    },
    //格式化json文件
    formatJson(filterVal, jsonData) {
      //filterVal是data中list的key值
      return jsonData.map((v) => filterVal.map((j) => v[j])); //list可能为空,所以报错map未定义
    },
阅读 7.9k
5 个回答

XLSX应该是一个专门的解析xlsx类型数据文件的第三方库吧,你是否正确引入了这个库?

如果已经正确引入了。试试window.XLSX

新手上路,请多包涵

import XLSX from 'xlsx-js-style'
要先安装xlsx-js-style

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题