跳到主要内容

使用 SweetAlert2 上传 Excel 文件

在上一节中，我们已经完成了两件非常重要的事情：

  • 使用 openpyxl 读取 Excel
  • 使用 openpyxl 写入 Excel

从这一节开始，我们将把这些工具真正用到业务中，实现一个完整的功能：

通过 Excel 文件导入学生信息

1.导入功能的整体流程​

在写代码之前，我们先把整个导入流程梳理清楚：

flowchart TD
    1[点击「导入」按钮] --> 2[弹出文件选择弹窗]
    2 --> 3[选择 Excel 文件并提交]
    3 --> 4[前端上传文件到后台]
    4 --> 5[后台读取 Excel 数据]
    5 --> 6[将数据写入数据库]
    6 --> 7[返回处理结果给前端]

只要你理解了这条流程，后面的代码就只是“把每一步落地”。

2.前端：点击导入按钮并选择文件​

在学生列表页中，我们已经有了一个「导入」按钮。

当用户点击这个按钮时，我们希望做的事情是：

弹出一个文件选择框，让用户选择 Excel 文件

这里我们继续使用 SweetAlert 来完成这个交互。

示例样式网址：https://sweetalert2.github.io/#input-file

const { value: file } = await Swal.fire({
  title: "Select image",
  input: "file",
  inputAttributes: {
    "accept": "image/*",
    "aria-label": "Upload your profile picture"
  }
});
if (file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    Swal.fire({
      title: "Your uploaded picture",
      imageUrl: e.target.result,
      imageAlt: "The uploaded picture"
    });
  };
  reader.readAsDataURL(file);
}

运行效果如下：

image-20260107183049526

3.前端：上传 Excel 文件到后台​

🔒 试读结束

继续阅读完整内容

以上为免费预览。前往「Django + Vue 全栈课程」，查看后续完整讲解、案例演示和配套资料。

查看课程详情