axios实现文件上传并获取进度


Posted in Javascript onMarch 25, 2020

本文实例为大家分享了axios实现文件上传并获取进度的具体代码,供大家参考,具体内容如下

实现效果

axios实现文件上传并获取进度

代码部分

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>

<body>
 <div id="app">
 <input @change="change" type="file">
 </div>
 <script src="./lib/vue.js"></script>
 <script src="./lib/axios.js"></script>
 <script>
 new Vue({
 el: '#app',
 data: {
  val: ''
 },
 methods: {
  change(e) {

  let files = e.target.files

  // 上传部分
  let url = ' ' //你的后台上传地址
  let data = new FormData()
  data.append('file', files[0])
  axios({
   url,
   method: 'post',
   data,
   headers: {
   
   },
   //原生获取上传进度的事件
   onUploadProgress:function(progressEvent){ 
   let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
  console.log('上传 ' + complete)
  }
  }).then(res => {
   console.log(res)
  }).catch(err => {
   console.log(err)
  })

  }
 }
 })
 </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
微信小程序实现单选功能
Oct 30 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 #Javascript
axios实现简单文件上传功能
Sep 25 #Javascript
layer弹出层取消遮罩的方法
Sep 25 #Javascript
QML实现圆环颜色选择器
Sep 25 #Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 #Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 #Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 #Javascript
You might like
PHP中一个控制字符串输出的函数
2006/10/09 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
python encode和decode的妙用
2009/09/02 Python
Python lxml模块安装教程
2015/06/02 Python
python 网络编程常用代码段
2016/08/28 Python
Python实现读取并保存文件的类
2017/05/11 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python的unittest测试类代码实例
2017/12/07 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
Python同时迭代多个序列的方法
2020/07/28 Python
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
客服文员岗位职责
2013/11/29 职场文书
教师现实表现材料
2014/02/14 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
python中如何对多变量连续赋值
2021/06/03 Python
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android