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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
js实现简易ATM功能
2020/10/27 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python 实现归并排序算法
2012/06/05 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
法学专业应届生求职信
2013/10/16 职场文书
大学生活学习的自我评价
2013/12/03 职场文书
个人简历自荐信
2013/12/05 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
房屋租赁协议书
2014/04/10 职场文书
论文评语大全
2014/04/29 职场文书