话不多说先上图，需要实现导入文件的功能，需要限制只能是.xls, .xlsx 文件
说明：
结合element将文件拖到此处，或 点击上传
仅允许导入 .xls，xlsx 格式文件有需要可以封装成子组件调用
vue结构代码：
<el-col :span="1.5"><el-buttontype="warning"plainicon="Download"@click="openImportDialog"v-hasPermi="['generator:materialinfo:export']">导入</el-button></el-col> <!-- 导入对话框 --><el-dialog title="导入" v-model="importDialogVisible" width="550px"><el-form><el-form-item label="第一步"><el-buttontype="primary"texthref="#"target="_blank"@click="downloadTemplate"><el-icon name="el-icon-download" style="margin-right: 4px"><Download /></el-icon>下载模板</el-button></el-form-item><el-form-item label="第二步"><el-uploadref="uploadedFileRef"class="upload-demo"dragaction="http://" 注意！替换这里的http地址为你自己的【上传文件】的地址multiple:on-success="handleUploadSuccess":on-error="handleUploadError":before-upload="beforeUpload":headers="{Authorization: `Bearer ${getToken()}`,}"accept=".xls,.xlsx"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><template #tip><div class="el-upload__tip">仅允许导入 .xls, .xlsx 格式文件</div></template></el-upload></el-form-item></el-form><template #footer><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="confirmImport">确 定</el-button></template></el-dialog>js逻辑部分：
import { getToken } from "@/utils/auth";
import { ref, reactive, onMounted } from "vue";const importDialogVisible = ref(false);
const uploadedFile = ref();
const uploadedFileRef = ref(null);/** 导入按钮操作 */
function handleExport() {proxy.download("generator/materialinfo/export",{...queryParams.value,},`material-info_${new Date().getTime()}.xlsx`);
}// 打开导入对话框并下载模板
function openImportDialog() {importDialogVisible.value = true;// 清除之前可能上传的文件if (uploadedFileRef.value) {uploadedFileRef.value.clearFiles();}
}
// 下载模板函数
function downloadTemplate() {// 使用window.open进行下载const url = "http地址"; 注意！替换这里的http地址为你自己的【下载模板的地址】window.open(url, "_blank");// 兼容更多的浏览器（一些浏览器可能会阻止window.open触发下载）// a标签模拟点击let a = document.createElement("a");a.href = url;a.download = "Material_Template.xls"; // 确保文件名有正确的扩展名a.style.display = "none";document.body.appendChild(a);a.click();document.body.removeChild(a);
}// 上传成功处理
function handleUploadSuccess(response, file) {console.log("上传成功:", response, file);uploadedFile.value = file.raw; // 存储上传的文件// 提示信息if (response.code === 200) {proxy.$message.success(response.msg);} else {proxy.$message.error(response.msg);}// 关闭导入对话框// importDialogVisible.value = false;// 刷新列表getList();
}
// 上传失败处理
function handleUploadError(err, file) {// 处理上传失败的逻辑console.error("上传失败:", err);
}// 上传前的检查
function beforeUpload(file) {const isExcel =file.type === "application/vnd.ms-excel" ||file.type ==="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";if (!isExcel) {this.$message.error("上传文件只能是 Excel 格式!");}return isExcel;
}function confirmImport() {console.log("取消按钮");// 检查是否上传了文件if (!uploadedFile.value) {ElMessage.error("请先上传文件!");return;}// 关闭导入对话框importDialogVisible.value = false;// 刷新列表getList();// 准备要发送的 FormDataconst formData = new FormData();
}// 取消按钮
function cancel() {open.value = false;importDialogVisible.value = false;// 清空上传文件列表if (uploadedFileRef.value) {uploadedFileRef.value.clearFiles();}reset();
}如有帮助，点👍谢谢
