vue3文件上传和模板下载功能实现代码教程

话不多说先上图，需要实现导入文件的功能，需要限制只能是.xls, .xlsx 文件

说明：

结合element将文件拖到此处，或 点击上传
仅允许导入 .xls，xlsx 格式文件

有需要可以封装成子组件调用

vue结构代码：

  <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="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-button
            type="primary"
            text
            href="#"
            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-upload
            ref="uploadedFileRef"
            class="upload-demo"
            drag
            action="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();
  // 准备要发送的 FormData
  const formData = new FormData();
}


// 取消按钮
function cancel() {
  open.value = false;
  importDialogVisible.value = false;
  // 清空上传文件列表
  if (uploadedFileRef.value) {
    uploadedFileRef.value.clearFiles();
  }
  reset();
}

如有帮助，点👍谢谢