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 特殊字符
Apr 05 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
node.js命令行教程图文详解
May 27 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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生成HTML静态页面实例代码
2008/08/31 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
php基本函数汇总
2015/07/09 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
[00:10]神之谴戒
2019/03/06 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
关于python多重赋值的小问题
2019/04/17 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
企业年会主持词
2014/03/27 职场文书
学生自我评语大全
2014/04/18 职场文书
商务英语专业求职信
2014/06/26 职场文书
无犯罪记录证明
2014/09/19 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
交通安全学习心得体会
2016/01/18 职场文书