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


Posted in Javascript onSeptember 26, 2018

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 相关文章推荐
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
axios取消请求的实践记录分享
Sep 26 #Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 #Javascript
在vue中获取token,并将token写进header的方法
Sep 26 #Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 #Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 #Javascript
基于JavaScript实现一个简单的Vue
Sep 26 #Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 #Javascript
You might like
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
推荐php模板技术[转]
2007/01/04 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
js常用函数 不错
2006/09/08 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
关于js类的定义
2011/06/28 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
Django 拆分model和view的实现方法
2019/08/16 Python
基于Django统计博客文章阅读量
2019/10/29 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
外企C语言笔试题
2013/11/10 面试题
最美孝心少年事迹材料
2014/08/15 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
售票员岗位职责
2015/02/15 职场文书
2016春季运动会开幕词
2016/03/04 职场文书