问答

axios的onDownloadProgress返回参数的total为0

作者:admin 2021-08-21 我要评论

想实现一个进度条效果,查了一下,需要使用axios的onDownloadProgress。然后把里面的loaded除于total就可以。但是不知道为什么,total是0。 求大佬解答 代码如下...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

想实现一个进度条效果,查了一下,需要使用axios的onDownloadProgress。然后把里面的loaded除于total就可以。但是不知道为什么,total是0。

求大佬解答

代码如下

import React, { Component } from 'react';
import './App.css';
import Axios from 'axios';
class App extends Component {
    doRequest = () =>{
        Axios({
            url:"http://localhost:1212/a.jpg",
            method:'get',
            //获取请求进度
            onDownloadProgress(progressEvent) {
                console.log(progressEvent);
                console.log(Math.round(progressEvent.loaded  /  progressEvent.total  *  100) +  '%');
            }
        })  
    }
    render() {
        return (
            <div className="App">
                <button onClick={this.doRequest}>点击请求文件</button>
            </div>
        );
    }
}

export default App;

返回结果如下
返回结果

###

编辑下,问题解决了。

https://github.com/axios/axios/issues/1591

axios的github上给出了解决方法

###

https://segmentfault.com/a/11... 这个详细说明了没有content-length的原因

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用箭头函数return数据不能实现

    使用箭头函数return数据不能实现

  • 个人小程序号能接入小程序3D地图吗?

    个人小程序号能接入小程序3D地图吗?

  • vue 移动端项目中,使用了better-scrol

    vue 移动端项目中,使用了better-scrol

  • css如何做出区域平均划分为四列

    css如何做出区域平均划分为四列

腾讯云代理商
海外云服务器