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 相关文章推荐
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
js对象数组和对象的使用实例详解
Aug 27 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 strtok()函数的优点分析
2010/03/02 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
JavaScript中的this实例分析
2011/04/28 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
详解Python中的变量及其命名和打印
2016/03/11 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
Python requests接口测试实现代码
2020/09/08 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
会展中心部门工作职责
2013/11/27 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
督导岗位职责
2015/02/04 职场文书
农村党支部承诺书
2015/04/30 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
Golang实现AES对称加密的过程详解
2021/05/20 Golang
用python画城市轮播地图
2021/05/28 Python