axios实现文件上传下载

文件上传

import axios from 'axios';

/**
 * 文件上传
 * @param { string } url
 * @param { file } file 你读取成功的回调文件信息
 * @returns
 */
export default function upLoadFile(url, file) {
  // new 一个FormData格式的参数
  const params = new FormData();
  params.append('file', file);
  const config = {
    headers: {}, // 请求头
  };

  return new Promise((resolve, reject) => {
    axios.post(url, params, config).then((res) => {
      if (res && res.data && res.data.status < 200) {
        resolve(res.data);
      } else {
        reject(res.data);
      }
    }).catch((err) => {
      reject(err);
    });
  });
}

文件下载

import { Message, Loading } from 'element-ui';
import axios from 'axios';

function getExcelBolb(url, params) {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url, // 请求地址
      params, // 参数
      responseType: 'blob', // 表明返回服务器返回的数据类型
      headers: {},
    }).then((res) => {
      resolve(res);
    }).catch((err) => {
      reject(err);
    });
  });
}

function downloadFile(url, params, fileName = '模板') {
  const loadingInstance = Loading.service({
    lock: true,
    fullscreen: true,
  });
  getExcelBolb(url, params).then((res) => {
    const blob = new Blob([res.data]);
    const eLink = document.createElement('a');
    eLink.download = `${fileName}.xlsx`;
    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(() => {
    Message({
      message: '文件下载失败',
      type: 'error',
    });
  }).finally(() => {
    loadingInstance.close();
  });
}

export default downloadFile;