文件管理

1、el-upload formDat 上传

header根据项目需求有所不同，本项目采用的是Cookie，另外，该封装内没有判断文件类型

import Cookies from "_js-cookie@2.2.1@js-cookie";
import axios from "_axios@0.19.2@axios";

function uploadFile_(file) {
  let uploadData = new FormData();
  uploadData.append("file", file.file);
  let headers = {
    "Content-Type": "multipart/form-data",
    "Accept-Language": Cookies.get("language") || "zh-CN",
    token: Cookies.get("tenant_token") || this.$store.state.user.token,
    tenant_code: Cookies.get("tenant_code") || "",
    userId: Cookies.get("userId") || null,
    deptId: Cookies.get("deptId") || null,
    appId: window.SITE_CONFIG["sysId"],
  };
  let url = `${window.SITE_CONFIG["apiURL"]}/import/vehicle`;
  axios
    .post(`${url}`, uploadData, { headers: headers })
    .then((res) => {
      console.log(res, "选择导入");
    })
    .catch((err) => {
      console.log(err, "选择导入");
    });
}

2、前端文件下载

2.1 后端返回文件流

let data = { projectId: this.selectValue };
console.log(data);
if (!data.projectId) {
  this.$message.error("请先选择项目");
  return;
}
http
  .post(
    "/cockpit/project/platform/export",
    { data: data },
    { responseType: "blob" }
  )
  .then((res) => {
    let upload = { fileName: new Date().getTime(), fileExtension: "xls" };
    //创建一个a标签
    const link = document.createElement("a");
    //实例化一个blob出来
    const blob = new Blob([res.data]);
    link.style.display = "none";
    //将后端返回的数据通过blob转换为一个地址
    link.href = URL.createObjectURL(blob);
    //设置下载下来后文件的名字以及文件格式
    link.setAttribute(
      "download",
      //upload为下载的文件信息 可以在外层包一个函数 将upload作为参数传递进来
      `${upload.fileName}.` + `${upload.fileExtension}`
    );
    document.body.appendChild(link);
    //下载该文件
    link.click();
    document.body.removeChild(link);
  })
  .catch((err) => {
    console.log(err);
  });