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 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
javascript 三种编解码方式
Feb 01 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 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
收音机术语解释
2021/03/01 无线电
PHP用户指南-cookies部分
2006/10/09 PHP
PHP 七大优势分析
2009/06/23 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
Js获取事件对象代码
2010/08/05 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
英文自我鉴定
2013/12/10 职场文书
小学数学教学反思
2014/02/02 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
招商引资工作汇报
2014/10/28 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript