最近遇到的问题，一个图片的链接，通过get请求获取其文件流

this.$get(url, {}, {
    responseType: "blob"
}).then(res => {
    let file = new File([res], "1.jpg", {
        type: "image/jpeg",
        lastModified: new Date().getTime()
    })
    console.log(file)
})
// 上面是使用，下面是封装部分
/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} headers [请求时携带的hearder]
 */
export function get(url, params = {}, headers = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params,
            headers: headers
        }).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err);
        });
    });
}

在通过以上代码调用后，获取的file始终大小不对，且不能看到图片，在查询问题后，发现在axios中，responseType并不是放在headers中，而是在外面，故封装部分代码应为

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} headers [请求时携带的hearder]
 */
export function get(url, params = {}, headers = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params,
            responseType: headers.responseType ? headers.responseType : "json",
            headers: headers
        }).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err);
        });
    });
}

既responseType是在axios.get的config中，但是是跟headers同级，此时获取的res.data就是一个blob对象，可以直接放进file中使用

this.$get(url, {}, {
    responseType: "blob" // 在封装代码中，我从header中取responseType
}).then(res => {
    let file = new File([res], "1.jpg", {
        type: "image/jpeg",
        lastModified: new Date().getTime()
    })
    console.log(file)
})

后提供一个我自己常用的axios封装模板文件，项目使用的是vite+vue+element

import axios from "axios";
import {Message} from "element-ui";

// 环境的切换
if (import.meta.env.VITE_ENV === "dev") {
    axios.defaults.baseURL = ""; //本地测试
} else if (import.meta.env.VITE_ENV === "prod") {
    axios.defaults.baseURL = ""; //发布版本
}
axios.defaults.timeout = 60000;
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";

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

// 响应拦截器
axios.interceptors.response.use(
    response => {
        if (response.status == 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服务器状态码不是200的情况
    error => {
        if (error.response && error.response.status) {
            switch (error.response.status) {
                case 404:
                    Message({
                        type: "error",
                        message: "网络中断或该请求不存在"
                    });
                    break;

                // 其他错误，直接抛出错误提示
                default:
                    Message({
                        type: "error",
                        message: error.response.data.msg
                    });
                    break;
            }
            return Promise.reject(error.response);
        } else {
            if (error.message.indexOf(JSON.stringify(axios.defaults.timeout)) != -1) {
                Message({
                    type: "error",
                    message: "接口请求时长超过" + axios.defaults.timeout / 1000 + "s"
                });
            } else {
                Message({
                    type: "error",
                    message: "Network Error"
                });
            }
            return Promise.reject(error.message);
        }
    }
);

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} headers [请求时携带的hearder]
 */
export function get(url, params = {}, headers = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params,
            responseType: headers.responseType ? headers.responseType : "json",
            headers: headers
        }).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err);
        });
    });
}

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} hearder [请求时携带的hearder]
 */
export function post(url, params = "", hearder = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, params, hearder).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err);
        });
    });
}

/**
 * 不常用的接口方法，对应put,del请求
 * @param {String} type [请求类型，put,delete]
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} hearder [请求时携带的hearder]
 */
export function request(type, url, params = "", hearder = {}) {
    return new Promise((resolve, reject) => {
        axios[type](url, params, hearder).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err);
        });
    });
}

使用方法如下，在main.js中

import {post, get, request} from "./request/http";
Vue.prototype.$post = post;
Vue.prototype.$get = get;
Vue.prototype.$request = request;