axios 封装上传文件的请求

最新推荐文章于 2025-05-27 20:42:38 发布

倪默遥

最新推荐文章于 2025-05-27 20:42:38 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：封装请求文章标签： http 上传文件的请求

本文链接：https://blog.youkuaiyun.com/nimoyaoww/article/details/79401346

封装请求专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Vue项目中利用Axios实现文件上传功能。通过配置请求头、响应处理及跨域设置等步骤，详细展示了文件上传的具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios 和 ajax 都支持异步请求，两者使用方法大同小异，在此使用 axios 上传文件的请求。使用的时候只需要在响应的 vue 组件中引入就可以。

import Vue from 'vue';
import VueCookie from 'vue-cookie';
import axios from 'axios';
// import toastr from '../assets/toastr.min';
// Vue.use(axios)


let http = {};
// let _baseURL = '/vpaas'
let _baseURL = 'http://localhost:8080/vpaas'
let ContentType = "application/json";

let uploadFileType = "multipart/form-data";
http.baseURL = _baseURL;


/**
 * 上传文件的请求
 * @param url
 * @returns {AxiosPromise}
 */
http.uploadFile = function (url, data) {
  let config = {
    //请求的接口，在请求的时候，如axios.get(url,config);这里的url会覆盖掉config中的url
    url: url,
    //基础url前缀
    baseURL: _baseURL,
    transformResponse: [function (data1) {
      var data = data1;
      if (typeof data1 == "string") {
        data = JSON.parse(data1);
      }
      //这里提前处理返回的数据;
      if (data.message && (data.data === 'login.invalid.token')) {
        window.localStorage.removeItem("access-user");
        alert("超时请重新登陆");
        window.location.href = '/';
      }
      return data;
    }],
    //请求头信息
    headers: {'access-user': window.localStorage.getItem('access-user'),  'Content-Type': uploadFileType},

    //跨域请求时是否需要使用凭证
    withCredentials: true,
    // 返回数据类型
    responseType: 'json', //default
  };
  return axios.post(url, data, config);
};