结合【ant design vue Upload组件】解析excel文件上传

upload组件默认的上传方法是不能很好的解析.xlsx, .xls文件的，下面来介绍结合ant design vue Upload组件解析excel的方法。
ant design vue Upload组件官方文档
首先是组件参数的设置，

<a-upload
          name="file"    //发到后台的参数名
          :multiple="true"	 //支持多选文件
          :showUploadList="false"   //不展示uploadList
          accept=".xlsx, .xls"	//设置接受上传的文件类型
          :customRequest="fileUpload"	//自定义函数覆盖掉组件默认的上传行为
        >
	<a-button  type="success" icon="download">Excel上传</a-button>
</a-upload>

这一步关键就是设置customRequest参数，接下来就是对上传的文件进行解析

1、封装上传文件的函数：这里用到FileReader Web API接口，感兴趣可以看fileReader官方文档，这里不再赘述

function upload(file){
  return new Promise(resolve=>{
      let reader = new FileReader()
      reader.readAsBinaryString(file);//读取文件的原始二进制数据
      reader.onload = ev=>{
          resolve(ev.target.result)
      }
  })
}

2、我们需要安装xlsx插件
下载插件：

npm install --save xlsx

在项目中引入：

import xlsx from 'xlsx';

3、开始正题，解析xlsx文件

async fileUpload(info) {
   let file = info.file;//info是组件为你解析好的数据
   if (!file) return;
   
   let reader = await upload(file);
   const worker = xlsx.read(reader, { type: 'binary' }); //设置数据类型为binary二进制
     // 这个是将数据进行一步拼接
     // 将返回的数据转换为json对象的数据
     let arr = [];
     worker.SheetNames.forEach((el) => {
       let temp = xlsx.utils.sheet_to_json(worker.Sheets[el]);
       temp.forEach((item) => {
         Object.keys(item).forEach((el) => {
           item[el] = String(item[el]);
         });
       });
       arr.push(temp);
     });
     
     info.file.status = 'done';//将文件上传状态改为‘done’，
     info.onSuccess();//结束上传
     let data = {
       list: arr, //按照后端要求格式上传
     };
     api.importexcel(data).then((res) => {//调接口
       if (res.code == 200) {
         this.$message.success('导入数据成功');
       }
     });
 },

info为选择文件上传后，组件解析好的信息，我们将主要用到的file打印出来如下：