VUE后台管理项目配合后端接口，有关文件下载、导入上传功能的详细实现方法

VUE后台管理项目配合后端接口，有关文件下载、导入上传功能的详细实现方法

一、 调用后端接口实现文件下载

这里分两种情况
一种是后端接口可以直接触发下载（就是直接访问链接即可触发）
另一种后端接口返回二进制数据，需要你前台先处理一下再下载

1. 访问后台接口直接触发下载

// 直接访问链接触发下载的方式实质上就是通过<a>标签进行下载
<button @click="downloadMethod">下载</button>

downloadMethod(){
	// 通过DOM新建一个<a>标签，设置访问链接和下载文件名称
	const a = document.createElement('a');
	a.href = 'http://10.173.1.10/download';
	a.download = 'filename.xlsx';
	// 将<a>标签添加至DOM中，并触发下载
	document.body.appendChild(a);
	a.click();
	// 调用结束后，从DOM中移除该标签
	document.body.removeChild(a);
}

2. 访问后台接口返回二进制数据处理后再下载

// 二进制数据处理需要用到第三方插件
npm install file-saver

相关科普文章：聊一聊 15.5K 的 FileSaver，是如何工作的？

// 引入file-saver
import { saveAs } from "file-saver";

// 下载方法
async download() {
	// 调用后端接口，拿到返回的二进制数据
	const response = await this.$axios({
	  method: "POST",
	  url: "/api/student/fileDownload",
	  responseType: "blob",
	});
	// 使用saveAs方法触发下载
	// 第一个参数是二进制文件数据，第二个参数是下载文件名称
	saveAs(new Blob([response.data]), "导入模版.xls");
}

二、文件导入上传到后端接口

这里分两种解决方案
一种是使用ElementUI官方提供的<el-upload>组件实现上传
另一种是使用原生的<input>表单实现上传

1. 使用ElementUI官方提供的<el-upload>组件实现上传

<el-upload>组件官方有详细使用文档，这里暂不赘述

2. 使用原生的<input>表单实现上传

// 使用原生的input文件上传标签
// 其中accept表示接收的文件类型、change事件表示选中文件时调用的方法
<input type="file" ref="file" @change="importExcel" accept=".xlsx, .xls" style="display:none;"/>

// [可选]由于原生的<input>样式不好看，可以将<input>隐藏，然后使用$refs来调用<input>
<el-button @click="$refs.file.click()">学生导入</el-button>

// 导入方法
async importExcel() {
  // 先拿到文件数据
  let file = this.$refs.file.files[0];
  
  // 防错校验
  if (!file) return;
  
  // 使用原生FormData类将拿到的文件进行处理
  const formData = new FormData();
  // 第一个参数是传递给后端接口的参数名称，第二个参数是刚才通过$refs拿到的file文件
  formData.append("file", file);
  
  try {
    const response = await this.$axios({
      // 注意headers一定要加上form-data
      headers: { "Content-Type": "multipart/form-data" },
      method: "POST",
      url: "/api/importExcel",
      data: formData,
    });
      // 成功处理
      ...
  } catch (error) {
      // 错误处理
      ...
  } finally {
    // 重置文件输入，防止用户第二次提交文件时页面无反应
    this.$refs.file.value = "";
  }
}