axios+Vue实现上传文件显示进度功能


Posted in Javascript onApril 14, 2019

一,前言

最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了

二,效果

axios+Vue实现上传文件显示进度功能

三,代码

HTML代码

<div id="app">
<h4>上传文件:</h4>
   <p class="input-zone">
    <span v-if="filename">{{filename}}</span>
    <span v-else>+请选择文件上传+</span>
 <input type="file" name="file" value="" placeholder="请选择文件" @change="upload" multiple="multiple" />
   </p>
  <p>上传进度:</p>
   <div class="progress-wrapper">
    <div class="progress-progress" :style="uploadStyle"></div>
    <div class="progress-rate">{{(uploadRate*100).toFixed(2)}}%</div>
   </div>
  </div>

CSS代码

.input-zone { width: 500px; color: blue; font-size: 14px; position: relative; }
   .input-zone input[type='file'] { opacity: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; }
  .progress-wrapper { position: relative; height: 50px; border-radius: 5px; background-color: lightgrey; }
   .progress-wrapper .progress-progress { position: absolute; left: 0; top: 0; height: 100%; width: 0%; border-radius: 5px; background-color: darkturquoise; z-index: 1; }
   .progress-wrapper .progress-rate { position: relative; text-align: center; font-size: 14px; line-height: 50px; height: 100%; z-index:2;}

JS代码

var app = new Vue({
   el: "#app",
   data: {
    uploadRate: 0,
    filename: '',
    uploadStyle: {
     width: '0%'
    }
   },
   methods: {
    upload: function (e) {
     var vm = this;
     var formData = new FormData();
     formData.append("name", "Alax");
     for (var i = 0; i < e.target.files.length; i++) {
      var file = e.target.files[i]; //取第1个文件
      formData.append("file", file);
      vm.filename = file.name;
      console.log(file);
     }
     var config = {
      headers: { 'Content-Type': 'multipart/form-data' },
      onUploadProgress: function (e) {
       console.log("进度:");
       console.log(e);
       //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
       //如果lengthComputable为false,就获取不到e.total和e.loaded
       if (e.lengthComputable) {
        var rate = vm.uploadRate = e.loaded / e.total; //已上传的比例
        if (rate < 1) {
         //这里的进度只能表明文件已经上传到后台,但是后台有没有处理完还不知道
         //因此不能直接显示为100%,不然用户会误以为已经上传完毕,关掉浏览器的话就可能导致上传失败
         //等响应回来时,再将进度设为100%
         vm.uploadRate = rate;
         vm.uploadStyle.width = (rate *100).toFixed(2)+ '%';
        }
       }
      }
     };
     axios.post("/ajaxPage/VueUpload.aspx?method=upload", formData, config)
      .then(function (data) {
       console.log(data);
       var json = data.data; //后台实际返回的结果
       if (json.result) {
        vm.uploadRate = 1;
        vm.uploadStyle.width = '100.00%';
       } else {
        alert(json.msg);
       }
      })
      .catch(function (err) {
       console.log(err);
      });
    }
   }
  })

 四,总结

1.其实单文件上传和多文件上传的区别就是 input标签中多了一个属性

multiple="multiple"

2.onuploadprogress 事件中显示上传为100%并不准确,一定要等到响应回来才能认为完成了100%,不然用户此时关闭了浏览器的话,上传就失败了。或者有其它逻辑时,此时点提交,就会导致后台找不到上传的文件路径等问题。

总结

以上所述是小编给大家介绍的axios+Vue实现上传文件显示进度功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 #Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 #Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 #Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 #Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 #Javascript
js中async函数结合promise的小案例浅析
Apr 14 #Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 #Javascript
You might like
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
php文件操作相关类实例
2015/06/18 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
Python中的Descriptor描述符学习教程
2016/06/02 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python 追踪except信息方式
2020/04/25 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
python中uuid模块实例浅析
2020/12/29 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
幼儿园课题方案
2014/06/09 职场文书
小学校园广播稿集锦
2014/10/04 职场文书