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