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聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
jquery获取radio值实例
Oct 16 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
详解Vue slot插槽
Nov 20 Vue.js
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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
Python实现模拟时钟代码推荐
2015/11/08 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Python列表元素常见操作简单示例
2019/10/25 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
美国翻新电子产品商店:The Store
2019/10/08 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
高中课程设置方案
2014/05/28 职场文书
小学清明节活动总结
2014/07/04 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
高中学校对照检查材料
2014/08/31 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
普通党员整改措施
2014/10/24 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers