vue使用axios实现文件上传进度的实时更新详解


Posted in Javascript onDecember 20, 2017

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF

引入方式:

$ npm install axios
//使用淘宝源
$ cnpm install axios
//或者使用cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

安装其他插件的时候,可以直接在 main.js 中引入并使用 Vue.use()来注册,但是 axios并不是vue插件,所以不能 使用Vue.use() ,所以只能在每个需要发送请求的组件中即时引入。

为了解决这个问题,我们在引入 axios 之后,通过修改原型链,来更方便的使用。

//main.js

import axios from 'axios'
Vue.prototype.$http = axios

在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $http命令

methods: {
postData () {
this.$http({
method: 'post',
url: '/user',
data: {
name: 'xiaoming',
info: '12'
}
})
}

更多的基础知识大家可以参考这篇文章:https://3water.com/article/110324.htm

vue使用axios实现文件上传进度实时更新

XHR二级增加了progress事件,我们可以据此在浏览器接收新数据期间添加实时数据进度条,从而使得交互更加友好

vue模板

<div class="progress" @click="upload"
   :style="{backgroundImage:'linear-gradient(to right,#C0C7CB 0%,#C0C7CB '+progress+',#E1E6E9 '+progress+',#E1E6E9 100%)'}">

vue-js

var form = new FormData()
 form.append('file', vm.$refs.upload.files[0])
 form.append('id', id)
 form.append('type', type)
 var config = {
  onUploadProgress: progressEvent => {
   var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
   this.progress = complete
  }
 }
 axios.post(`api/uploadFile`,
  form, config).then((res) => {
  if (res.data.status === 'success') {
   console.log('上传成功')
  }
 })

关键点在于progress事件,而axios对ajax封装之后需要在axios的config参数里面写好事件处理函数(具体参数写法可查看axios文档)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
javascript 常见功能汇总
Jun 11 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 #Javascript
详解JS模块导入导出
Dec 20 #Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 #Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 #Javascript
常用的9个JavaScript图表库详解
Dec 19 #Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 #Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 #Javascript
You might like
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
浅析php创建者模式
2014/11/25 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
img的onload的另类用法
2008/01/10 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
在vue项目中使用sass的配置方法
2018/03/20 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
Python与shell的3种交互方式介绍
2015/04/11 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Django框架视图函数设计示例
2019/07/29 Python
Django 重写用户模型的实现
2019/07/29 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
高中生自我评价范文2015
2015/03/03 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书