前端使用axios调后端接口来处理文件（word、pdf等）

考虑到项目后期维护，自己封装了axios方法，方便项目后期更换服务器

api.js

import axios from 'axios'
axios.defaults.withCredentials = true
// axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')

export default async (
  url,
  data = {},
  method = '',
  headers = {},
  responseType = ''
) => {
  try {
    return new Promise((success, error) => {
      axios({
        url: url,
        data,
        method,
        headers,
        responseType
      })
        .then((res) => {
          success(res)
        })
        .catch((res) => {
          error(res)
        })
    })
  } catch (err) {
    // console.log(err)
  }
}

上传文件：

// 上传
    Upload(file) {
      let that = this;
      console.log(file);
      let url = "";
      // 根据上传文件的地方不同，用switch筛选，确定相应的上传url
      switch (that.upload_content.type) {
        case "Contract":
          url = "接口1";
          break;
        case "Voucher":
          url = "接口2";
          break;
        case "Invoice":
          url = "接口3";
          break;
        case "Checklist":
          url = "接口4";
          break;
        default:
          break;
      }
      if (
        that.upload_content.type == "pdf" &&
        file.file.name.split(".").slice(-1) != "pdf"
      ) {
        this.$message.warning("上传合同（模版）只能是pdf格式!");
      } else {
        // 文件和参数都应当转换为FormData
        let fileFormData = new FormData();
        fileFormData.append("file", file.file);
        fileFormData.append("operatorName", that.upload_content.operatorName);
        fileFormData.append("operatorGh", that.upload_content.operatorGh);
        fileFormData.append(
          "operatorDepartment",
          that.upload_content.operatorDepartment
        );
        fileFormData.append("remarks", that.upload_content.remarks);
        fileFormData.append(
          "transferProcessId",
          that.upload_content.transferProcessId
        );
        console.log(fileFormData);
        that
          .request(url, fileFormData, "POST", {})
          .then((res) => {
            console.log(res);
            if (res.data.status == "success") {
              this.$message({
                type: "success",
                message: "上传成功！",
              });
              that.refresh();
            } else {
              this.$message({
                message: res.data.data.errMsg,
                type: "error",
              });
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message({
              message: "出错了！",
              type: "error",
            });
          });
      }
    },

下载word：

// 下载（word）
    GetTemplate() {
      let that = this;
      that
        .request(
          "后端接口url",
          {},
          "GET",
          {},
          "blob"
        )
        .then((res) => {
          console.log(res);
          try {
            console.log(res.data);
            let blob = new Blob([res.data]);
            let fileName = "默认文件名.doc";
            let elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } catch (err) {
            console.log(err);
            this.$message({
              message: "数据请求失败！",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            message: "出错了！",
            type: "error",
          });
        });
    },

下载pdf：

// 下载（pdf）
    downloadPdf(row, type) {
      let that = this;
      let url = "后端接口url";
      that
        .request(url, {}, "GET", {}, "blob")
        .then((res) => {
          console.log(res);
          if (res.data.type == "application/json") {
            this.$message({
              message: "文件获取失败！",
              type: "error",
            });
          } else {
            try {
              let blob = new Blob([res.data], {
                type: `application/pdf`, //word文档为msword,pdf文档为pdf
              });
              let objectUrl = URL.createObjectURL(blob);
              let link = document.createElement("a");
              let fname = `默认文件名`; //下载文件的名字
              link.href = objectUrl;
              link.setAttribute("download", fname);
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
            } catch (err) {
              console.log(err);
              this.$message({
                message: "数据请求失败！",
                type: "error",
              });
            }
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            message: "出错了！",
            type: "error",
          });
        });
    },