vue上传文件后,读取数据

1. 安装依赖

npm install xlsx --save-dev

2. 在页面中引入

import xlsx from 'xlsx'

3. element ui结合vue做文件数据读取

html代码

<el-upload ref="upload" :limit="1" :on-change="changeFile" :on-remove="removeFile" :file-list="fileLists" :auto-upload="false"
                :on-exceed="handleExceed" class="upload-demo" action="bao" accept=".xls">
                <el-button size="mini" type="primary">点击上传</el-button>
              </el-upload>

js代码

/** 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
     * @param {Object} file
     * @param {Object} fileList
     */
    changeFile(file, fileList) {
      // console.dir(file)
      this.uploadParam = new FormData()
      if (file.status == 'ready') {
        // this.uploadParam.append('cstListFile', file.raw)
        // if (this.uploadParam.get('cstListFile')) {
          // 1 读取文件里的数据(前端处理)
          this.importfxx(file.raw)
          // 2 上传到后端,后端对文件处理
         // 这里可以调接口
      } else if (file.status == 'fail') {
        this.$message.error('文件上传出错，请刷新重试！')
      }
    },

数据处理的最重要的方法

// 读取文件后,前端做处理
    importfxx(obj) {
      let _this = this;
      var rABS = false; //是否将文件读取为二进制字符串

      var reader = new FileReader();
      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function(e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          //此处引入，用于解析excel
          var XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64"
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary"
            });
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); // 读取第一个sheet的数据进行json格式化,也是可以读取第二个wb.Sheets[wb.SheetNames[1]]
          console.log('wb.SheetNames[0]', wb.SheetNames[0]) // 第一个sheet的名字
          console.log(wb.Sheets[wb.SheetNames[0]]) // 第一个sheet中所有的表格数据 没有格式化的
          //outdata就是读取的数据（不包含标题行即表头，表头会作为对象的下标）
          //此处可对数据进行处理
          let arr = [];
          outdata.map(v => {
              let obj = {}
              obj.code = v['名字']
              obj.name = v['密码']
              arr.push(obj)
          });
          // _this.da=arr;
          // _this.dalen=arr.length;
          console.log(arr)
          return arr;
        };
        reader.readAsArrayBuffer(obj);
      };
      if (rABS) {
        reader.readAsArrayBuffer(obj);
      } else {
        reader.readAsBinaryString(obj);
      }
    },