(首先有这个问题出现 最大的原因是 后端的 懒 建议给后端打一顿)(手动滑稽)
问题:解析excel 取得想要的数据 然后传给后端
解决方案:
1.首先下载依赖:
命令:
npm install xlsx
然后文件里引入:
import XLSX from "xlsx";
2.这里用到的是 elementui 组件。
upload - https://element.eleme.cn/#/zh-CN/component/upload#upload-shang-chuan
样式大家随意 选择自己想要的效果就可以了。
![](https://i-blog.csdnimg.cn/blog_migrate/ef39979bae7b6ae11b0da38e5ad4234e.png)
值得注意一点的是:
upload组件的上传地址 action - 不需要填写地址 直接一个 ‘/’ 就可以 因为我们不需要他上传 只需要触发on-change 获取上传的文件 储存起来就可以了
<el-upload
action="/"
:on-change="onChange"
:auto-upload="false"
:show-file-list="false"
accept=".xls, .xlsx"
>
<el-button size="small" type="text" class="upload-bom uploadBtn">
<span class="iconXlSX-sty-test">导入名单</span>
</el-button>
</el-upload>
onChange函数:
// 文件选择回调
onChange(file, fileList) {
this.$confirm("此操作将永久覆盖名单, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
})
.then(() => {
this.fileData = file; // 保存当前选择文件
this.readExcel(); // 调用读取数据的方法
})
.catch(() => {
this.$message({
type: "info",
message: "已取消",
});
});
},
我这里加入了二次确认框。大家各凭喜好
之后就是重头戏 解析 excel
3. 直接贴代码:
// 读取数据
readExcel(e) {
let that = this;
const files = that.fileData;
if (!files) {
// 如果没有文件 - 当然也可以提醒用户弹个警告框 但是基本没有这种情况的出现
return false;
} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
// 文件格式的判断
this.$message.error("上传格式不正确,请上传xls或者xlsx格式");
return false;
}
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
// console.log(data)
const workbook = XLSX.read(data, {
type: "binary",
});
console.log(workbook.SheetNames);
// 取第一张表
const wsname = workbook.SheetNames[0];
// 生成json表格内容
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
// 循环 ws 取得其中的数据
// 把 ws 打印出来 就可以看得很清楚了 之后就进行自己想要的操作就可以了
// 没有一样的代码 没有一样的需求
var temporary = [];
for (let i = 0; i < ws.length; i++) {
temporary.push([
ws[i].一级分销客手机号 + "",
ws[i].一级真实姓名,
ws[i].一级归属门店,
ws[i].二级分销客手机号 + "",
ws[i].二级真实姓名,
ws[i].二级归属门店,
]);
}
this.DistributorList = temporary;
console.log("temporary", temporary);
// 调接口 上传 data 给后端
接口({ List: this.DistributorList }).then((res) => {
if (res.code == 0) {
console.log(res);
this.$message({
type: "success",
message: "上传成功!",
});
}
});
} catch (e) {
return false;
}
};
// 如果为原生 input 则应是 files[0]
fileReader.readAsBinaryString(files.raw);
}
表的信息要和你取数据时循环拿值的信息对应上
![](https://i-blog.csdnimg.cn/blog_migrate/09589336ede2550e3676bb378f6b7805.png)
这个 其实 还有很多问题 没有解决
比如 一次性 取得 多个表 进行 循环取值
或者 是 如果第一行 名字不对应的话 该怎么办 等等
这个贴更多为 记录贴 有不足 请多多包涵.