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 相关文章推荐
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
js数组的基本使用总结
2021/01/18 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
求职简历自荐信范文
2013/10/21 职场文书
总务岗位职责
2013/11/19 职场文书
导购员的岗位职责
2014/02/08 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
商务考察邀请函模板
2015/02/02 职场文书
观后感开头
2015/06/19 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
导游词之凤凰古城
2019/10/22 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
php修改word的实例方法
2021/11/17 PHP