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);
      }
    },