网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/5/9 浏览:3 次 )

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 封装上传文件的请求方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

上一篇:如何在 JavaScript 中更好地利用数组
下一篇:axios取消请求的实践记录分享
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网