使用axios实现上传图片进度条功能

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Features

从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF

下面给大家介绍使用axios实现上传图片进度条功能，具体内容介绍如下所示：

　在最近做的项目中，一个手机页面最多要上传几十张图片，虽然对照片做了压缩处理，不过最后还是很大，如果网卡的话，上传的时间很差，如果一直在loading的话，用户都不知道什自己上传了多少，为了更直观的展现上传的进度，最好显示进度条，和显示上传的百分比；

　　项目用的是vuejs框架，mint-ui做为ui框架；请求的是vue官方推荐的axios（真的很强大）；在axios官方介绍了使用原生上传处理进度事件（具体参考这里，这里有中文的axios官方介绍）：

 onUploadProgress: function (progressEvent) {
  // 对原生进度事件的处理
 },

　　因为使用vuejs，对于接口的数据请求，为方便管理，需要统一的管理。如果放在每个组件里，不方便日后的维护和管理；在reqwest.js文件里，定义了一个uploadPhoto方法，该方法有三个参数，分别是参数，和两个回调函数，参数就是我们要上传图片的需要的额参数；而第一个回调函数，是获取上传进度包含的数据，第二回调是获取上传成功失败，后台返回的数据；来进行页面的下一步操作。

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ //原生获取上传进度的事件
        if(progressEvent.lengthComputable){
          //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
          //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
          callback1(progressEvent);
        }
      },
      data:payload
    }).then(res =>{
      callback2(res.data);
    }).then(error =>{
      console.log(error)
    })
  }

使用mint-ui组件里的Progress组件，在data的方法里定义该组件里的变量precent，该变量是number类型，在定义的时候，注意；

<mt-progress :value="precent" :bar-height="10">
   <div slot="end">{{Math.ceil(precent)}}%</div>
  </mt-progress>

把reqwest.js 这个文件import 进来，获取到uploadPhoto这个方法，根据获取上传的进度，使用$nextTick 这个属性，实时的更新的页面上。

const _this = this;
API.uploadPhoto(fd,(res) =>{
 let loaded = res.loaded,
   total = res.total;
   _this.$nextTick(() =>{
    _this.precent = (loaded/total) * 100;
   })
},(res) =>{
  if(res.code === '200'){
    MessageBox.alert('图片上传成功').then(action => {
     console.log('ok');
    });
  }
})

　　根据上面的方法基本实现图片的上传进度和百分比的显示，剩下的就是ui了，根据自己个性化定制来实现你那完美的需求...

总结

以上所述是小编给大家介绍的使用axios实现上传图片进度条功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • VUE 更好的 ajax 上传处理 axios.js实现代码
  • Vue axios 中提交表单数据(含上传文件)
  • VUE axios上传图片到七牛的实例代码
  • vue项目中使用axios上传图片等文件操作
  • vue使用axios实现文件上传进度的实时更新详解
赞 (0)

相关推荐

  • VUE 更好的 ajax 上传处理 axios.js实现代码

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios模块之后 import axios from 'axios'; //安装方法 npm install axios //或 bower install axios 当然也可以用script引入 <script src="https://unpkg.com/axios/dist/axios.min

  • VUE axios上传图片到七牛的实例代码

    浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提交. form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据.但是如果想传输多条form表单数据,需要写很多dom,同时还要写iframe,太麻烦. 目前感觉比较干净的办法就是通过axios的post请求,发送form数据到后台. html部分,至于界

  • 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

  • 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

  • Vue axios 中提交表单数据(含上传文件)

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

  • 使用axios实现上传图片进度条功能

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

  • JS+html5实现异步上传图片显示上传文件进度条功能示例

    本文实例讲述了JS+html5实现异步上传图片显示上传文件进度条功能.分享给大家供大家参考,具体如下: <html> <head> </head> <body> <p> emo_album_id:<input type="text" name="emo_album_id" id="emo_album_id" value='1'> </p> <p> na

  • AngularJS实现进度条功能示例

    AngularJS实现进度条功能示例

    本文实例讲述了AngularJS实现进度条功能的方法.分享给大家供大家参考,具体如下: 一.功能描述: ① 通过select标签,可以为进度条选择不同的样式(颜色) ② 进度条的进度通过文本框里面的值改变(也可以快捷的选择几个特定的值) ③ 通过checkbox按钮,控制进度条上的文字是否显示 二.代码实现: <!DOCTYPE html> <html lang="en" ng-app='app'> <head> <meta charset=&

  • bootstrap+jQuery实现的动态进度条功能示例

    本文实例讲述了bootstrap+jQuery实现的动态进度条功能.分享给大家供大家参考,具体如下: 此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progress-bar从而实现基本的进度条. b.在外层<div>中加入class .progress-striped实现条纹进度条. c.在内层<div>加入class .progress-b

  • js HTML5 Ajax实现文件上传进度条功能

    本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1.  lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +

  • php+javascript实现的动态显示服务器运行程序进度条功能示例

    php+javascript实现的动态显示服务器运行程序进度条功能示例

    本文实例讲述了php+javascript实现的动态显示服务器运行程序进度条功能.分享给大家供大家参考,具体如下: 经常有这样的业务要处理,服务器上有较多的业务需要处理,需要分批操作,于是就需要一个提示客户现在完成进度的进度条. 这个是php+javascript的进度条. <?php //set_time_limit(0); //注意,如果是安全模式,请不要打开,如果不是安全模式,这个选项可以打开 for ($i = 0; $i < 500; $i++) { $users[] = 'Tom_

  • python控制台中实现进度条功能

    python控制台中实现进度条功能

    我们大多数人都希望写一些简单的python脚本的同时都想能够在程序运行的过程中实现进度条的功能以便查看程序运行的速度或者进度.今天就和大家探讨这个问题:如何在python控制台中实现进度条功 进度条最主要的问题就是所有字符全部在同一行,而且可以修改. 然而当执行print语句的时候,python会在打印完这个语句的同时在结尾加上'\n',也就是换行,这就导致在控制台下一旦被print之后就无法再修改了.所以我们现在的输出就不能再使用print来完成了. 我们要使用的是来自sys库的sys.std

  • C#实现带百分比的进度条功能示例

    本文实例讲述了C#实现带百分比的进度条功能.分享给大家供大家参考,具体如下: 功能需求: 如果程序中会执行一个耗时的计算过程,我想在用户点击按钮后,弹出一个进度条窗口,显示正在执行的进度(最好能带有百分比),执行完成后,进度条窗口关闭,回到主程序窗口. 在关闭子窗口之前父窗体不能点击操作. 实现方法: 先设计Form2进度条窗体,在Form2中央上放ProgressBar控件progressBar1和Label控件label1,代码: public partial class Form2 : F

  • Android编程基于自定义View实现绚丽的圆形进度条功能示例

    Android编程基于自定义View实现绚丽的圆形进度条功能示例

    本文实例讲述了Android编程基于自定义View实现绚丽的圆形进度条功能.分享给大家供大家参考,具体如下: 本文包含两个组件,首先上效果图: 1.ProgressBarView1(支持拖动): 2.ProgressBarView2(不同进度值显示不同颜色,不支持拖拽):   代码不多,注释也比较详细,全部贴上了: (一)ProgressBarView1: /** * 自定义绚丽的ProgressBar. */ public class ProgressBarView1 extends View

  • php使用APC实现实时上传进度条功能

    php不具备实时上传进度条功能,如果想有这种功能我们一般会使用ajax来实现,但是php提供了一个apc,它就可以与php配置实现上传进度条功能. 主要针对的是window上的应用. 1.服务器要支持apc扩展,没有此扩展的话,下载一个扩展扩展要求php.5.2以上. 2.配置apc相关配置,重启apache 代码如下 extension=php_apc.dll   apc.rfc1867 = on   apc.max_file_size = 1000M   upload_max_filesiz

随机推荐