vue+element-ui+xlsx实现前端校验上传的Excel文件

1,036 阅读1分钟

以下为beforeUpload改变后的代码:

  beforeUpload(file) {
    let _this = this;
    // 使返回的值变成Promise对象,如果校验不通过,则reject,校验通过,则resolve
    return new Promise(function(resolve, reject){
      // readExcel方法也使用了Promise异步转同步,此处使用then对返回值进行处理
      _this.readExcel(file).then(result => {// 此时标识校验成功,为resolve返回
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          _this.$message.error('文件大小不能超过2MB!');
        }
        if (isLt2M && result){
          resolve('校验成功!');
        } else {
          reject(false);
        }
      }, error => {// 此时为校验失败,为reject返回
        _this.$message.error(error);
        reject(false);
      });
    });
  }

以下为readExcel改动后的代码

  readExcel(file) {// 解析Excel
    let _this = this;
    return new Promise(function(resolve, reject){// 返回Promise对象
      const reader = new FileReader();
      reader.onload = (e) => {// 异步执行
        try {
          // 以二进制流方式读取得到整份excel表格对象
          var data = e.target.result, workbook = XLSX.read(data, {type: 'binary'});
        } catch (e) {
          reject(e.message);
        }

        // 表格的表格范围,可用于判断表头是否数量是否正确
        var fromTo = '';
        // 遍历每张表读取
        for (var sheet in workbook.Sheets) {
          let sheetInfos = workbook.Sheets[sheet];
          let locations = [];// A1,B1,C1...
          if (workbook.Sheets.hasOwnProperty(sheet)) {
            fromTo = sheetInfos['!ref'];// A1:B5
            locations = _this.getLocationsKeys(fromTo);
          }

          for (let i = 0;i < locations.length; i++) {
            let value = sheetInfos[locations[i]].v;
            if (value != i) {// 自定的校验规则,自由实现即可
              // 校验失败reject
              reject(locations[i] + ''s parameter isn't ' + i);
            }
          }
          // 校验成功resolve
          resolve(true);
        }
      };
      reader.readAsBinaryString(file);
    });
  }

以下为getLocationsKeys代码

getLocationsKeys(range) {// A1:B5输出 A1,B1...,如果超过26个就会出现,A1:AA1情况,以此类推,也可能出现BA1(BZ1)
        let rangeArr = range.split(':');
        let startString = rangeArr[0];
        let endString = rangeArr[1];

        var reg=/[A-Z]{1,}/g;
        let end = endString.match(reg)[0];


        let total = 0;// 共有多少个
        for (let index = 0;index < end.length;index++) {
          total += Math.pow(26, end.length - index - 1) * (end.charCodeAt(index) - 64);
        }

        let result = [];
        for (let i = 0;i < total;i++) {
          result.push(this.getCharFromIndex(i) + '1');
        }
        return result;
      },