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 相关文章推荐
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 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
PHP+javascript模拟Matrix画面
2006/10/09 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
php组合排序简单实现方法
2016/10/15 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
推荐dojo学习笔记
2007/03/24 Javascript
javascript 闭包疑问
2010/12/30 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python删除特定文件的方法
2015/07/30 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Python实现的特征提取操作示例
2018/12/03 Python
python批量解压zip文件的方法
2019/08/20 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
入党自我鉴定范文
2013/10/04 职场文书
留学推荐信怎么写
2014/01/25 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
公司募捐倡议书
2014/05/14 职场文书
会计求职信范文
2014/05/24 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
管理人员岗位职责
2015/02/14 职场文书
交通事故代理词范文
2015/05/23 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python