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

2024-04-18 13:42:17

一,前言

最近在用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实现上传文件显示进度功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)

vue-cli+axios实现附件上传下载记录: 上传: 这里用formData格式传递参数:请求成功后后台返回上传文件的对应信息. 重点是下载: ############## downloadfile(res) { var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //applicati
使用axios实现上传图片进度条功能

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 Promise API 拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF 下面给大家介绍使用axios实现上传图片进度条功能,具体内容介绍如下所示: 在最近做的项目中,一个手机页面最多要上传几十张图片,虽然对照片做了压缩处理,不过最后还
详解Vue+axios+Node+express实现文件上传(用户头像上传)

Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="backup"></mu-icon> 修改头像 </label> <input type="file" ref="upload" name="avatar" id='my_file' style="d
axios 封装上传文件的请求方法

axios 和 ajax 都支持异步请求,两者使用方法大同小异,在此使用 axios 上传文件的请求.使用的时候只需要在响应的 vue 组件中引入就可以. import Vue from 'vue'; import VueCookie from 'vue-cookie'; import axios from 'axios'; // import toastr from '../assets/toastr.min'; // Vue.use(axios) let http = {}; // let
Vue axios 中提交表单数据(含上传文件)

我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport
vue使用axios上传文件(FormData)的方法

在此主要介绍如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单.模拟表单提交,当然最大的优势就是可以上传二进制文件. 过多介绍不说,过多的煽情语句不说,直接来来干活,希望对广大博友有所帮助.也希望各位大神不吝赐教 1.前台上传文件的表单和响应函数  <form> <input type="text" value="&
vue使用axios实现文件上传进度的实时更新详解

axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求支持 Promise API 拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF 引入方式: $ npm install axios //使用淘宝源 $ cnpm install axios //或者使用cdn: <script s
axios实现文件上传并获取进度

本文实例为大家分享了axios实现文件上传并获取进度的具体代码,供大家参考,具体内容如下实现效果代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app">
vue项目中使用axios上传图片等文件操作

axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求支持 Promise API 拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios
axios+Vue实现上传文件显示进度功能

一,前言最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了二,效果三,代码 HTML代码 <div id="app"> <h4>上传文件:</h4> <p class="input-zone"> <span v-if="filename">{{filename}}</span> <span v-else>+请选择文件上传
jquery+ajax实现异步上传文件显示进度条

前言: 今天项目中加了一个上传文件加进度条的需求,我就搞了一下.时间宝贵不多说,直接进入正题. 异步上传文件是要用到ajax里的一个小的知识点:xhr(XML Http Request)一个对象,xhr对象也是ajax一个核心. 关于使用它也很简单:就四步(下面这样写也可以向后端进行发送请求) var xhr=new XMLHttpRequest()//创建xhr对象 xhr.open('请求方式','请求的地址') xhr.send()//发佛那个请求 xhr.onreadystatechan
基于ajax实现文件上传并显示进度条

下面给大家分享下基于ajax实现文件上传并显示进度条.在jsp部分,需要设计一个表单,form的属性添加 enctype="multipart/form-data",设计一个iframe,作为隐藏.form的target等于iframe的name; 在servlet部分:文件上传用的Commons-FileupLoad,需要两个Jar,commons-fileupload和commons-io,少了第二个会报出找不到类的异常: 第一个servlet处理上传,及把上传进度保存到sessi
基于HTML5 Ajax实现文件上传并显示进度条

本文实例讲解了ajax上传文件及进度条的实现方法,分享给大家供大家参考,具体内容如下效果图: html5上传是同步上传的方式,所以能够实现进度条的显示. 1.上传文件: 首先我们用ajax来取得<input type="file" id="file_upload">的file对象: var file = null; var input = $("#file_upload"); //文件域选择文件时, 执行readFile函数 inp
Struts2实现文件上传时显示进度条功能

最近在做一个资源共享的项目中,采用了Struts2.1.8+Spring2.5.6+hibernate3.32的框架整合方式进行开发.在文件上传这块,因为需要实现文件上传时显示进度条的功能,所以尝试了一下.怕以后忘记,先贴出来分享下. 要在上传文件时能显示进度条,首先需要实时的获知web服务端接收了多少字节,以及文件总大小,这里我们在页面上使用AJAX技术每一秒向服务器发送一次请求来获得需要的实时上传信息.但是当我们使用struts2后怎么在服务端获得实时的上传大小呢?这里需要用到commons
vue+element_ui上传文件,并传递额外参数操作

需求: 1.文件大小验证 2.文件类型验证 3.额外参数传输 <template> <el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUploadForm" :on-exceed="formHandleExceed" :on-remove="
vue+springboot上传文件、图片、视频及回显到前端详解

目录效果图设计逻辑数据库表前端vue html js代码前端思路储存文件信息上传文件对象后端上传下载代码完整代码 workinfo.vue SubmitHomeworkController 总结效果图预览: 设计逻辑数据库表前端vue html <div class="right-pannel"> <div class="data-box">  <div style=&quo
PHP + plupload.js实现多图上传并显示进度条加删除实例代码

PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&qu
php 使用html5 XHR2实现上传文件与进度显示功能示例

本文实例讲述了php 使用html5 XHR2实现上传文件与进度显示功能.分享给大家供大家参考,具体如下: 思路:只要我们知道上传文件的总大小,还有上传过程中上传文件的大小,那么就可以实现进度显示了. 在html5中,XMLHttpRequest对象,传送数据的时候,progress事件用来返回进度信息. 它分成上传和下载两种情况 1.下载的progress事件属于XMLHttpRequest对象 2.上传的progress事件属于XMLHttpRequest.upload对象. 与progre
vue el-upload上传文件的示例代码

话不多说直接上代码 <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-list="fileList" :on-preview="handlePreview" :on-success="hand

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

相关推荐

随机推荐