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学习笔记(十) js对象 继承
Jun 19 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
ES6 async、await的基本使用方法示例
Jun 06 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
杏林同学录(八)
2006/10/09 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
Python中__name__的使用实例
2015/04/14 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
python3爬取数据至mysql的方法
2018/06/26 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
通过自学python能找到工作吗
2020/06/21 Python
Python pip 常用命令汇总
2020/10/19 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
大学新生军训感言
2014/02/25 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
安全责任协议书
2014/04/21 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
主持人开幕词
2015/01/29 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技