欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

axios 封装上传文件的请求方法

程序员文章站 2023-11-10 16:19:40
axios 和 ajax 都支持异步请求,两者使用方法大同小异,在此使用 axios 上传文件的请求。使用的时候只需要在响应的 vue 组件中引入就可以。 imp...

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);
};

以上这篇axios 封装上传文件的请求方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。