上传表格获取表格内容解析成数组

需求就是前端点击上传一张表格，需要将表格里面的内容获取生成对应的数组传给后端

<el-upload
        class="upload"
        ref="upload"
        drag
        accept=".xls,.xlsx,.csv"
        :http-request="afterUpload"
        :show-file-list="false"
      >
        <div class="upload-content">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">导入表格</div>
          <el-tooltip
            class="item"
            effect="dark"
            placement="top"
            style="margin-left: 10px"
          >  
        </div>
      </el-upload>

这里就是用elementUI的el-upload组件进行上传交互
afterUpload方法就是上传文件之后的操作
解析表格，需要用到XLSX依赖，所以先下载xlsxnpm i xlsx

import XLSX from "xlsx";
afterUpload({file}){
const reader = new FileReader();
reader.onload = async (e) => {
            const data = e.target.result;
            const workbook = XLSX.read(data, {
              type: "binary",
            });
            const wsname = workbook.SheetNames[0];
            const ws = await XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); // 生成json表格内容
            //ws解析之后是key-value的形式
            this.exportDataHandler(ws)
          };
          reader.readAsBinaryString(file);
}

得到的结果就是表头为key，内容为value的数组

然后根据这个数组，遍历获取想要的数组形式

exportDataHandler(data){
let table = data.map((item) => {
	name: item['商品名称'],
	id: item['商品ID'],
	price: item['价格'],
})
}

XLSX.utils里面还有其他方法，例如可以转成txt类型，使用XLSX.utils.sheet_to_txt方法，转成html类型只需要使用XLSX.utils.sheet_to_html即可