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 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
微信小程序音乐播放器开发
Nov 20 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+MySQL实现消息队列的方法分析
2018/05/09 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
Angular.js之作用域scope'@','=','&'实例详解
2017/02/28 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
python安装scipy的步骤解析
2019/09/28 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
中文专业求职信
2014/06/20 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js