vue、elementUI的excel文件导入导入

vue、elementUI的excel文件导入导入

<el-dialog title="导入" :visible.sync="upload.open" width="400px" append-to-body :close-on-click-modal="false"><el-uploadref="upload":limit="1"accept=".xlsx, .xls":headers="upload.headers":action="upload.url":disabled="upload.isUploading":on-progress="handleFileUploadProgress":on-success="handleFileSuccess":auto-upload="false":file-list="excelList":on-remove="onRemoveDr":on-change="onChangeDr"drag><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div></el-upload><el-button size="mini" type="success" @click="downloadImportTemplate">下载模板</el-button><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitFileForm">导 入</el-button><el-button @click="cancelFileForm">取 消</el-button></div></el-dialog>import { Loading } from "element-ui";
///
//导入upload: {// 是否显示弹出层（用户导入）open: false,// 弹出层标题（用户导入）title: "",// 是否禁用上传isUploading: false,// 是否更新已经存在的用户数据// updateSupport: 0,// 设置上传的请求头部// 上传的地址url: ""},//上传的文件excelList:[],//
//导入按钮handleImport(){this.upload.open = true;  },//导入提交submitFileForm(){if (lList.length === 0) {this.$message.warning("请选择文件");return;}if (lList.length > 1) {this.$message.warning("每次只能提交一个文件");return;}let formData = new FormData();lList.forEach((item) => {formData.append("file", item.raw);console.log(item.raw);});console.("file"));let loadingInstance = Loading.service({lock: true, //lock的修改符--默认是falsetext: "导入中", //显示在加载图标下方的加载文案spinner: "el-icon-loading", //自定义加载图标类名background: "rgba(0, 0, 0, 0.7)", //遮罩层颜色target: document.querySelector("#futureTransferDialog"), //loadin覆盖的dom元素节点});uploadFile(formData).then((res) => {loadingInstance.close();console.log(res);this.$message({type: "success",message: "导入成功!",});List();}).then(() => {console.log("关闭  上传");lList = [];this.upload.open = false;}).finally(() => {loadingInstance.close();});},//下载导入模板downloadImportTemplate(){window.location.href = "xxxxxxxxxxxx"},// 文件上传成功处理handleFileSuccess(response, file, fileList) {lList = fileList;},// 文件上传中处理handleFileUploadProgress(event, file, fileList) {this.upload.isUploading = true;},onChangeDr(file, fileList) {lList = fileList;},onRemoveDr(file, fileList) {lList = fileList;},cancelFileForm(){this.upload.open = lList = [];},