1.html部分
<template>
<div>
<el-dialog
title="导入"
:visible.sync="dialogExcelVisible"
width="600px"
:before-close="handleClose"
>
<el-form label-position="right" label-width="120px" :model="excelForm">
<el-form-item label="Excel文件">
<el-upload
class="image-uploader"
:multiple="false"
:auto-upload="true"
list-type="text"
:show-file-list="true"
:file-list="fileList"
:before-upload="beforeUpload"
:drag="true"
action
:limit="1"
:on-exceed="handleExceed"
:http-request="httpRequest"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
一次只能上传一个文件,仅限Excel和XMl文件
</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose" size="mini">取消 </el-button>
<el-button type="primary" size="mini" @click="uploadExcel"
>确定</el-button
>
</div>
</el-dialog>
</div>
</template>
2.js部分
<script>
import XLSX from "xlsx";
export default {
props: {
dialogExcelVisible: {
type: Boolean,
default: false,
},
},
data() {
return {
excelForm: {},
fileList: [],
excelData: [],
fileObj: {},
fileParma: "",
};
},
methods: {
beforeUpload(file) {
if (!file) {
return false;
} else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
this.$message.error("上传格式不正确,请上传xls或者xlsx格式");
return false;
}
},
httpRequest(e) {
let file = e.file; // 文件信息
this.fileParma = e.file;
this.fileObj = new FormData();
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: "binary", // 以字符编码的方式解析
});
this.excelData = workbook.SheetNames;
} catch (err) {
return false;
}
};
fileReader.readAsBinaryString(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,请删除后继续上传`);
},
uploadExcel() {
this.fileObj.append("xlsFile", this.fileParma);
this.$axios
//根据实际情况要替换掉接口
.post(`/api/WMSV2/ImportInventoryRecord_Excel`, this.fileObj)
.then((res) => {
if (res.data.status == true) {
this.$message({
message: "成功",
type: "success",
});
this.fileList = [];
this.$emit("handleClose1");
}
});
},
handleClose() {
this.fileList = [];
this.$emit("handleClose");
},
},
};
</script>