最近在做关于OA系统的项目,就多次涉及到了导入。那么如何只用前端来实现导入功能呢?
这是基于elementUI实现的
按钮
<el-upload style="margin-left: 20px;display: inline-block;" action="a" accept=".xlsx" :on-exceed="exceed"
:limit="1" :on-remove="remove" :before-upload="beforeUpload">
<el-button style="margin-right: 20px" icon="el-icon-download" type="info">导入</el-button>
</el-upload>
方法体
async uploadFile(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]);
if (sheetArray.length == 0) {
continue;
}
console.log("读取文件");
for (let item in sheetArray) {
let rowTable = {};
rowTable.fllowNumber = sheetArray[item].流水号;
rowTable.deptId = sheetArray[item].费用部门;
rowTable.dealDate = sheetArray[item].处理日期;
rowTable.content = sheetArray[item].摘要;
rowTable.inMoney = sheetArray[item].收款金额;
rowTable.outMoney = sheetArray[item].付款金额;
rowTable.businessType = sheetArray[item].业务类型;
this.obj.incomexpList.push(rowTable)
}
this.uploadIncomexpList();
console.log(this.obj.incomexpList)
}
} catch (e) {
this.$message.warning('文件类型不正确!');
}
};
fileReader.readAsBinaryString(_file);
}, exceed: function () {
this.$message.error("最多只能上传1个xls文件");
}, remove() {
this.getDataList()
}, beforeUpload(file) {
this.uploadFile(file);
return false
},