前端使用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",
            });
          });
      }
    },

下载文件：

// 下载文件
let downloadFiles = function (url) {
    request(url, {}, "GET", {}, "blob")
        .then((res) => {
            console.log(res)
            if (res.headers["content-disposition"] != undefined) {
            	alert("准备开始下载！");
                let filename = decodeURI(
                    res.headers["content-disposition"].split("fileName=")[1]
                );
                try {
                    let blob = new Blob([res.data], {
                        type: `application/force-download`, //word文档为msword,pdf文档为pdf
                    });
                    let objectUrl = URL.createObjectURL(blob);
                    let link = document.createElement("a");
                    link.href = objectUrl;
                    link.setAttribute("download", filename);
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                } catch (err) {
                    console.log(err);
                    alert("数据请求失败！");
                }
            } else {
                // 下载出错获取错误信息
                request(url, {}, "GET", {}).then((res) => {
                    alert(res.data.data.errMsg);
                })
            }
        })
        .catch((err) => {
            console.log(err);
            alert("出错了！");
        });
}

export default {
    downloadFiles
}