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的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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数据库中的所有表名的代码
2011/04/23 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
分享php邮件管理器源码
2016/01/06 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
几种tab切换详解
2017/02/03 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python随机数random模块使用指南
2016/09/09 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
keras中的卷积层&池化层的用法
2020/05/22 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
南京某公司笔试题
2013/01/27 面试题
《三峡》教学反思
2014/03/01 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
基层党员公开承诺书
2014/05/29 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
意向协议书
2015/01/27 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
python基础之//、/与%的区别详解
2022/06/10 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android