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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
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算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
利用python将图片转换成excel文档格式
2017/12/30 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Keras 使用 Lambda层详解
2020/06/10 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
生产车间主任的个人自我鉴定
2013/10/25 职场文书
婚前财产公证书
2014/04/10 职场文书
难忘的一课教学反思
2014/04/30 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
三行辞职书范文
2015/02/26 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
成绩单家长意见
2015/06/03 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
Python实现socket库网络通信套接字
2021/06/04 Python
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
分享3个非常实用的 Python 模块
2022/03/03 Python