如何实现“vue axios封装文件下载”

流程步骤

步骤 操作
1 创建一个封装文件下载的axios实例
2 在Vue组件中引入封装的axios实例
3 发起文件下载请求

具体操作步骤

步骤一：创建一个封装文件下载的axios实例

// 创建axios实例
import axios from 'axios';

const downloadAxios = axios.create({
  baseURL: '',  // 设置请求的基础url
  responseType: 'blob', // 设置响应数据的类型为二进制流
});

// 拦截器处理文件流数据
downloadAxios.interceptors.response.use((response) => {
  const fileName = response.headers['content-disposition'].split('=')[1];  // 获取文件名
  const url = window.URL.createObjectURL(new Blob([response.data]));  // 创建一个临时url
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', fileName);  // 设置下载文件的名称
  document.body.appendChild(link);
  link.click();
});

export default downloadAxios;

步骤二：在Vue组件中引入封装的axios实例

import downloadAxios from '@/utils/downloadAxios';  // 引入封装的axios实例

export default {
  methods: {
    downloadFile() {
      downloadAxios.get('/download/file')  // 调用封装的axios实例的get方法
        .then((res) => {
          console.log('文件下载成功');
        })
        .catch((error) => {
          console.error('文件下载失败');
        });
    },
  },
};

步骤三：发起文件下载请求

<template>
  <div>
    <button @click="downloadFile">下载文件</button>  <!-- 点击按钮触发下载文件方法 -->
  </div>
</template>

序列图

sequenceDiagram
    participant VueComponent
    participant AxiosInstance
    VueComponent->>AxiosInstance: 发起文件下载请求
    AxiosInstance->>AxiosInstance: 拦截器处理文件流数据
    AxiosInstance-->>VueComponent: 返回响应数据

通过以上步骤，你就可以实现在Vue项目中使用封装的axios实例来下载文件了。希望对你有所帮助！如果有任何疑问，欢迎随时向我提问。