React组件Progress（进度条）+axios中onUploadProgress在前端展示上传进度条百分比

 涉及代码如下：

1.首先要导入组件

import {Progress,} from 'antd';

2.在this.state中定义

​​​​​​​precent: 0,

3.axios中详细代码如下

 onUploadProgress :(progressEvent)=>{
          //F12展示进度情况
          console.log(progressEvent);
          console.log(Math.round(progressEvent.loaded / progressEvent.total * 100) + '%');
          //定义一个percent
          let percent = (Math.round(progressEvent.loaded / progressEvent.total * 100))
          console.log(percent);
          this.setState({percent:percent})
          // this.setState({progressEvent:(Math.round(progressEvent.loaded / progressEvent.total * 100))});
      },

（axios中自带onUploadProgress可以查看文件上传的进度条，点击F12可以看到百分比,动态展示）

4.运用Ant Design里的组件Progress

<Progress percent={this.state.percent} size="small" />

{}中可以写数字，可以做变量,size可以控制大小

PS:如果需要隐藏进度条，只在上传的时候显示，完成以后隐藏，用法如下：

1.在this.state中定义，默认为不显示

showProgress: false,

 2.设置一个定时器，用来定义上传完成后控制进度条消失

// 定时器
  setTimer = () =>{
    var self = this;
    if(this.timer){
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(() => {
      self.setState({
        showProgress: false
      });
    },2000);
    }

3.在.then里指向定时器方法，然后在上传的方法里加入showProgress

axios({
})
.then( (response)=>{
    //指向定时器
    this.setTimer();
})
this.setState({
    //显示开启
    showProgress: true
    })

4.给Progress组件加入div标签，控制隐藏（三目运算符）

（三目运算符：对于条件表达式b ? x : y，先计算条件b，然后进行判断。如果b的值为true，计算x的值，运算结果为x的值；否则，计算y的值，运算结果为y的值。）

<div>{this.state.showProgress ? (
          <Progress percent={this.state.percent} size="small" />
          ) : null}
          </div>