vue 3 响应/请求拦截 文件下载 上传

request.js

import axios from "axios";
import router from "../router/index";
import { ElMessage } from "element-plus";

const request = axios.create({
    baseURL: "",
});

// 设置请求拦截器
request.interceptors.request.use(
    (config) => {
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

// 设置响应拦截器
request.interceptors.response.use(
    function (response) {
        if (response.data.code === 201) {
            ElMessage.warning({
                message: response.data.message,
                type: "warning",
            });
        } else if (response.data.code === 4003 || response.data.code === 403) {
            router.push("/");
        } else if (response.data.code === 500) {
            ElMessage.error("服务器错误！");
        }
        return response.data.data || response.data;
    },
    function (error) {
        return Promise.reject(error);
    }
);

// 暴露对象
export default request;

文件下载

import request from './request'

async function fileDownloadUtil({url,params,data,method,filename}) {
    let res = await request({
        url: url,
        method,
        params,
        data,
        responseType: "blob"
    });
    const blob = new Blob([res], {
        type: "application/octet-stream"
    });
    let fileName = filename+".xls";
    if(filename.split(".").length > 1){
        fileName = filename;
    }
    const linkNode = document.createElement("a");

    linkNode.download = fileName;
    linkNode.style.display = "none";
    linkNode.href = URL.createObjectURL(blob);
    document.body.appendChild(linkNode);
    linkNode.click();

    URL.revokeObjectURL(linkNode.href);
    document.body.removeChild(linkNode);
}
export {
    fileDownloadUtil
}

文件上传

 //单文件上传
export function fileUpload(fd) {
    return request({
        url: "/hfcxCommonInterface/fileUpload/upload",
        method: "POST",
        data: fd,
    });
}

//多文件上传
export function batchUpload(fd) {
    return request({
        url: "/hfcxCommonInterface/fileUpload/batchUpload",
        method: "POST",
        data: fd,
    });
}

  // 单图片上传图片 
        async sendImage() {
            let formData = new FormData();
            formData.append("file", param.file);
            formData.append(
                "filePath",
                "/familyDoctorMobile/doctor"  //文件地址
            );
            let { details, code } = await fileUpload(formData);
            if (code == 200) {
                let arr = [details.data.filePath] //details.data.filePath返回的文件url
                
            }
        },

//多图上传
async batchUpload() {
                let requestData = new FormData();
                this.imgList.forEach(item => {
                    requestData.append("files", item.file);
                });
                requestData.append("filePath", "/commonToolsManage/justPhoto");
                let res = await batchUpload(requestData);
                let filePathArray = [];
                if (res.code === 200) {
                    res.details.data.forEach(item => {
                        filePathArray.push(item.filePath);
                    })
                }
                return filePathArray;
            },