下面用了react-toastify和axios ,相关包可以在npmjs中搜索到

主要是在axios 提交文件过程中引入一个config ,通过config导出对应的上传进度,通过toast.update修改上传进度条

private onUpload() {
        let toastId: any = null
        var config = {
          onUploadProgress: (progressEvent: any) => {
            var complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
            console.log(this.progress);
    
            this.progress = Number(complete) / 100
    
            if (toastId === null) {
              toastId = toast.info(`文件上传中(${this.progress*100}%)`, {
                progress: this.progress
              });
            } else {
              console.log(toastId);
              
              toast.update(toastId, { 
                render: `文件上传中(${this.progress*100}%)`,
                progress: this.progress
              })
            }
    
          
    
          }
        }
        let formData = new FormData(this.formElemUpload)
        let file = formData.get('file')
        this.api.uploadMetaQuanittyFile(this.props.subprojId, file, config).then(res => { 
          toast.done(toastId)
        })
        console.log(this.progress);
     
      }