业务需求:
代码结构:
<el-dialogtitle="批量导入":close-on-click-modal="true"@close="close()":visible="true"width="35%":center="true"><div class="el-dialog-div"><!-- 头部区域布局 --><div class="header_area"><div class="header_word"><p>专家导入</p></div><div class="header_list"><el-buttontype="primary"size="small"icon="el-icon-download"plain@click="downloadTemplate">下载模板</el-button></div></div><el-uploadclass="upload-demo"ref="upload":action="uploadUrl":file-list="fileList":auto-upload="false":headers="{ token: $cookie.get('token') }":multiple="false":show-file-list="true":on-change="handleChange":on-remove="handleRemove":limit="1"><el-buttonslot="trigger"size="small"type="primary"icon="el-icon-plus"plain:disabled="fileList.length>0">专家文件选择</el-button></el-upload></div><span slot="footer" class="dialog-footer"><el-button @click="close()">取消</el-button><el-button type="primary" @click="dataFormSubmit()" :uploading="uploading">确定</el-button></span></el-dialog>下载模板方法:
// 下载模板downloadTemplate() {// 模板文件的下载链接const templateFileUrl = "/uploads/template.xlsx"; //后端给一个服务器模板链接// 创建一个链接元素const link = document.createElement("a");link.href = templateFileUrl;link.target = "_blank";link.download = "模板.xlsx"; // 下载的文件名link.style.display = "none";// 将链接元素添加到 DOM 中document.body.appendChild(link);// 模拟点击下载链接link.click();// 移除链接元素document.body.removeChild(link);},提交上传方法:
1.先做类型判断 大小判断 是否上传
// 检查是否选择了文件if (this.fileList.length <= 0) {this.$message.error("请先选择要导入的文件");return;}// 检查文件类型是否是 xlsx 或 xlsconst isExcel =this.fileList[0].name.endsWith(".xlsx") ||this.fileList[0].name.endsWith(".xls");if (!isExcel) {this.$message.error("仅支持上传 .xlsx 或 .xls 格式的文件!");return;}// 检查文件大小是否符合限制const isSizeValid = this.fileList[0].size / 1024 / 1024 < 10;if (!isSizeValid) {this.$message.error("文件大小不能超过10MB");return;}2.提交后端方法
this.uploading = true;// 创建 FormData 对象，用于将文件作为表单字段上传const formData = new FormData();formData.append("file", this.fileList[0].raw);// 发送文件上传请求this.$http({url: this.$http.adornUrl("/professorInfo/importProfessorInfo","member"),method: "post",headers: { "Content-Type": "multipart/form-data" },data: formData,}).then(({ data }) => {console.log(data, "000000000");// 处理上传成功的逻辑if (data && data.code === "0") {// 上传成功的处理逻辑this.$message({message: `成功导入${data.data.successNum}条数据`,type: "success",duration: 2000,onClose: () => {this.$emit("refresh-data-list");this.close();},});} else {// 上传失败的处理逻辑this.$message.error(data.msg);// 其他逻辑处理...}this.uploading = false;this.$emit("refresh-data-list");this.close();}).catch((error) => {// 处理请求异常的逻辑this.$message.error(data.msg);console.error(error);// 其他逻辑处理...this.uploading = false;});3.完整代码
dataFormSubmit() {// 检查是否选择了文件if (this.fileList.length <= 0) {this.$message.error("请先选择要导入的文件");return;}// 检查文件类型是否是 xlsx 或 xlsconst isExcel =this.fileList[0].name.endsWith(".xlsx") ||this.fileList[0].name.endsWith(".xls");if (!isExcel) {this.$message.error("仅支持上传 .xlsx 或 .xls 格式的文件!");return;}// 检查文件大小是否符合限制const isSizeValid = this.fileList[0].size / 1024 / 1024 < 10;if (!isSizeValid) {this.$message.error("文件大小不能超过10MB");return;}this.uploading = true;// 创建 FormData 对象，用于将文件作为表单字段上传const formData = new FormData();formData.append("file", this.fileList[0].raw);// 发送文件上传请求this.$http({url: this.$http.adornUrl("/professorInfo/importProfessorInfo","member"),method: "post",headers: { "Content-Type": "multipart/form-data" },data: formData,}).then(({ data }) => {console.log(data, "000000000");// 处理上传成功的逻辑if (data && data.code === "0") {// 上传成功的处理逻辑this.$message({message: `成功导入${data.data.successNum}条数据`,type: "success",duration: 2000,onClose: () => {this.$emit("refresh-data-list");this.close();},});} else {// 上传失败的处理逻辑this.$message.error(data.msg);// 其他逻辑处理...}this.uploading = false;this.$emit("refresh-data-list");this.close();}).catch((error) => {// 处理请求异常的逻辑this.$message.error(data.msg);console.error(error);// 其他逻辑处理...this.uploading = false;});},
