使用 XLSX 插件 npm install xlsx --save
<el-upload
class="upload-demo"
action=""
:http-request="uploadExcel"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
>
<el-button size="small" type="primary">批量导入账号</el-button>
</el-upload>
//批量导入账户
uploadExcel(file) {
const _file = file;
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: "binary",
});
for (let sheet in workbook.Sheets) {
//循环读取每个文件
const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]); //若当前sheet没有数据，则continue
if (sheetArray.length == 0) {
continue;
}
console.log("读取文件");
for (let item in sheetArray) {
let rowTable = {};
//这里的rowTable的属性名注意要与上面表格的prop一致
//sheetArray的属性名与上传的表格的列名一致
rowTable.advertiser_id = sheetArray[item].媒体账户;
this.selectIDPageArr.push(rowTable);
}
}
} catch (e) {
this.$message.warning("文件类型不正确！");
}
};
console.log(_file) //注意这里是使用vue封装了一层的 所以可能会报错 需要console 一下这个_file 看看内容是什么字段
fileReader.readAsBinaryString(_file.file);
}
tips
想要删除文件列表内容 this.$refs.upload.uploadFiles.splice(idx, 1)
如果想要中断上传可以调用 this.$refs.uploader.abort()
before-upload 方法不触发问题：
before-upload 与 auto-upload的状态是有关系的
当auto-upload为true时 before-upload方法才会被触发
