Vue使用el-upload解析excel文件以表格形式显示；txt文件以文档形式显示

el-upload有一个on-change事件
文件状态改变时会触发该事件


代码如下：
解析excel的方法中：elTableData存放的是内容，sheetNameList 存放的是标题
解析txt的方法中：textareaData 存放的是内容

 /*
    选取文件后显示在输入框内
    */
    //on-change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    changeList(param) {
      console.log("param内容",param)
      const privateKeyFile = this.$refs.upload.uploadFiles[0].raw;
      //截取导入文件后缀判断文件类型
      var index = param.name.lastIndexOf("."); //获取“.”最后一次出现的位置
      var behindString = param.name.substring(index + 1);
  if (
        behindString.toUpperCase() == "XLSX" ||
        behindString.toUpperCase() == "XLS" //导入文件为excel类型
      ) {
        let _this = this;
        _this.file2Xce(param).then((item) => {
          //解析以后展示表格
          const [head, ...data] = item[0].sheet;
          const elTableData = [];
          data.forEach((row) => {
            const elTableRow = {};
            row.forEach((column, idx) => {
              elTableRow[idx] = column;
            });
            elTableData.push(elTableRow);
          });

          this.tableHead = head;
     
          //将全部的数据放入itemLists，用于sheet名选择框内容改变时判断sheet名
          this.itemLists = item;
          if (item && item.length > 0) {
            // xlsxJson就是解析出来的json数据,数据格式如下
            // [{sheetName: sheet1, sheet: sheetData }]
            this.sheetNameList = item.map((value, i) => {
              return {
                label: value.sheetName,
                value: value.sheetName,
                idx: i,
              };
            });
          }
        });
      } else if (behindString.toUpperCase() == "TXT") {
        //导入文件为txt类型
        const privateKeyFile = this.$refs.upload.uploadFiles[0].raw;
        if (privateKeyFile.size > 1024 * 1024) {
          this.$message({
            type: "warning",
            message: "该文件过大无法预览，请选择小于1M的文件进行预览",
          });
          return;
        }
        let reader = new FileReader();
        if (typeof FileReader === "undefined") {
          this.$message({
            type: "warning",
            message: "您的浏览器不支持FileReader接口",
          });
          return;
        }

        reader.readAsText(privateKeyFile, "gb2312");

        let that = this;
        // 不用that的话可以用箭头函数，不然会出现指向错误
        reader.onload = function (e) {
          that.textareaData = e.target.result;
        };
      } else {
        this.$message({
          type: "warning",
          message: "只能上传excel表格或者txt文件",
        });
        
        this.$refs.upload.clearFiles();//清空上传列表
        return;
      }
    },



    file2Xce(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        reader.onload = function (e) {
          const data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "array",
          });
          const result = [];
          this.wb.SheetNames.forEach((sheetName) => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName], {
                header: 1,
              }),
            });
          });
          resolve(result);
        };
        reader.readAsArrayBuffer(file.raw);
      });
    },

以表格形式显示解析后的excel内容html代码如下

   <el-table
          border
          class="importTableClass"
          :data="tableDataList"
          style="width: 59%"
        >
          <el-table-column
            :show-overflow-tooltip="true"
            v-for="(head, idx) in tableHead"
            :prop="String(idx)"
            :key="idx"
            :label="head"
            width="180"
          >
          </el-table-column>
        </el-table>

txt的内容可以直接用textarea显示
注意点：
这个方法我实现的是导入文件预览的功能，只支持导入excel或者txt格式的文件，并对txt文件的大小进行了限制，避免解析预览造成长时间卡顿；

这个方法现只支持解析gb2312编码格式的txt文件excel文件不存在编码的问题；
如果更完善一点，应该先判断txt文件的编码格式，再用不同的解码格式去解析txt文件，现在如果上传其他编码格式的txt文件，解析出来中文就是乱码，暂未找到解决方法，如有方法解决请大佬指教！