结合【ant design vue Upload组件】解析excel文件上传
upload组件默认的上传方法是不能很好的解析.xlsx, .xls文件的,下面来介绍结合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打印出来如下:
更多推荐
已为社区贡献2条内容
所有评论(0)