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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
element多个表单校验的实现
May 27 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
Vue组件开发初探
2017/02/14 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
微信小程序自动客服功能
2017/11/02 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
Python求解平方根的方法
2015/03/11 Python
python二分查找算法的递归实现方法
2016/05/12 Python
python实现下载文件的三种方法
2017/02/09 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
django rest framework serializers序列化实例
2020/05/13 Python
python 爬虫请求模块requests详解
2020/12/04 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
一份婚庆公司创业计划书
2014/01/11 职场文书
2015年宣传工作总结
2015/04/08 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL