vue3结合element-plus实现【下载文件】和【上传文件】的动态ip地址配置

效果图

一、修改【文件上传】静态地址

1、首先引入axios

import axios from "@/utils/request";
import { getToken } from "@/utils/auth";

定义

const importDialogVisible = ref(false);
const uploadedFile = ref();
const uploadedFileRef = ref(null);

2、将:action 修改

:action="uploadAction"

3、然后定义uploadAction

const uploadAction = computed(() => {return `${axios.defaults.baseURL}/permit/xxx/import`;// 修改为你自己的
});

二、修改【下载模板】静态地址：

修改前：

修改后动态的：

1、代码

 const url = `${axios.defaults.baseURL}/xxx/xxx-xxx/xxx/download`;替换为你的接口

例如：

// 下载模板函数
function downloadTemplate(row) {const id = row.id; // 获取当前行的idconst url = `${axios.defaults.baseURL}/call/open-api-record/download/${id}`; // 构造请求URLlet a = document.createElement("a"); // 创建一个<a>元素a.href = url; // 设置下载链接a.style.display = "none"; // 使<a>元素不可见document.body.appendChild(a); // 将<a>元素添加到body中a.click(); // 模拟点击<a>元素，触发下载document.body.removeChild(a); // 下载后移除<a>元素
}

三、全部代码：

1、vue结构部分

   <!-- 导入对话框 --><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="uploadAction"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>

2、js逻辑部分代码：

import axios from "@/utils/request";
import { getToken } from "@/utils/auth";const importDialogVisible = ref(false);// 对话框默认关闭状态const importDialogVisible = ref(false);
const uploadedFile = ref();
const uploadedFileRef = ref(null);// 上传文件地址
const uploadAction = computed(() => {return `${axios.defaults.baseURL}/xx/xx/import`;// 这里替换为你的接口地址
});// 打开导入对话框并下载模板
function openImportDialog() {importDialogVisible.value = true;// 清除之前可能上传的文件if (uploadedFileRef.value) {uploadedFileRef.value.clearFiles();}
}// 下载模板函数
function downloadTemplate() {// 使用window.open进行下载const url = `${axios.defaults.baseURL}/xxx/xxx/xxx/download`;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();
}

3、css样式部分：

<style scoped lang="scss">
.custom-dialog .el-dialog__body {padding: 20px 30px;
}.custom-form .el-form-item {margin-bottom: 20px;
}.tag-container {display: flex;flex-wrap: wrap;gap: 10px;
}.tag-container .el-tag {cursor: pointer;user-select: none;padding: 6px 12px;border-radius: 4px;background-color: #f4f4f5;border-color: #e9e9eb;color: #909399;
}.tag-container .el-tag.tag-active {color: #fff;
}.dialog-footer {display: flex;justify-content: flex-end;gap: 12px;padding-top: 10px;
}
.el-tag {margin: 4px;
}
.upload-demo {border: 1px dashed #d9d9d9;border-radius: 6px;padding: 10px;text-align: center;width: 90%;min-height: 150px;
}
.el-upload__text {margin-top: 10px;
}
.review-dialog {padding: 20px;height: 400px;overflow: auto;
}
:deep(.pagination-container .el-pagination) {right: 20px !important;position: absolute;
}
</style>