如何将多个文件上传到Firebase-React JS

Question

我正在使用React JS应用，正在尝试将文件上传到Firebase。我可以轻松上传文件，甚至可以上传单个文件，但是问题是当我试图显示在单个文件上上传文件的进度时。我建立了一个UI，当用户选择文件时，文件将被渲染并显示文件的大小，名称和类型等。当我单击上载按钮时，将在后台开始上载。我想做的是如何在视图上显示多个文件的进度。

国家

this.state = {
  selectedFilesPrev: [],
  filesPreviewAble: false,
  multiple: true,
  showLoaders: false
}

JSX DOM

render() {

        if(!this.state.filesPreviewAble){
            return (
                <div className='container'>
                    <div className='file-uploader-page' >
                        <div className='upload-icon'> <img src={uploadIcon} alt='upload'/> </div>
                        <p> Drag and Drop Files </p>
                        <p className='orSeparate'>Or</p>
                        <div className='files-upload-btn'>
                            <input type='file' id='file-upload' multiple={this.state.multiple} onChange={this.buttonUpload}/>
                            <label htmlFor='file-upload' className='rcaBtn'> Upload Files </label>
                        </div>
                    </div>
                </div>
            )
        } else if(this.state.filesPreviewAble){
            let l = '';
            if(this.state.showLoaders){
                l = <div className='file-uploading-bar'> <div className='fub-uploaded' style={{width:`${this.state.selectedFilesPrev.progress.percent}%`}}></div> </div>
            } else { l = ''}
            return (
                <div className='container'>
                    <div className='files-preview container-fluid' >
                    <div className='fp-head'> Files to be Uploaded </div>
                    <div className='fp-files'>
                        {
                            this.state.selectedFilesPrev.map( (e, i) => {
                                return (
                                    <div className='single-file row' key={i}>
                                        <div className='file-preview col-2'>
                                            <img src={e.img} alt='icon' />
                                        </div>
                                        <div className='file-meta col-9'>
                                            <span className='file-name'> {e.meta.name} </span>
                                            <span className='file-size'> {this.formatFileSize(e.meta.size)} - {e.meta.type} </span>
                                        </div>
                                        <div className='file-close col-1'> <span onClick={this.removeFile}>×</span> </div>
                                        {l}
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className='fp-upload'>
                        <button className='rcaBtn' onClick={this.handleUploadingFiles}>Upload Now</button>
                    </div>
                    </div>
                </div>
            )
        }

    }

文件选择器代码

    buttonUpload(event){
        let object = event.target.files;
        let files = []
        for (const key in object) {
            if (object.hasOwnProperty(key)) {
                const element = object[key];
                files.push(element)
            }
        }
        let i = 0;
        files.map( f => {
          this.generatePreviewData(f, (prev) => {
              i++;
              this.state.selectedFilesPrev.push({
                  meta : f,
                  img : prev,
                  progress : {
                      percent : 0,
                      upoaded : false
                  }
              })
              if(i === files.length){
                  this.setState({
                      filesPreviewAble : true
                  })
              }
          })
          return 0;
        })
    }

上传器功能（可以完美运行）

    handleUploadingFiles(){
        console.log(this.state.selectedFilesPrev)
        this.setState({ showLoaders : true })
        this.state.selectedFilesPrev.map( (file, idx) => {
            let task = stdb.ref(`Images/${file.meta.name}`).put(file.meta);
            task.on('state_changed', snapshot => {
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                this.state.selectedFilesPrev[idx].progress.percent = progress;
                console.log("FILE # "+idx,' Upload is ' + progress + '% done');
            },
            error => {
                console.log(error)
            },
            () => {
                stdb.ref('Images').child(file.meta.name).getDownloadURL().then( url => {
                    console.log(url)
                })
            }) 
        })
    }

注意：我想要的只是，当用户单击上载按钮时，每个文件的上载进度都应显示在UI上。 handleUploadingFiles()的进度，输出每个任务的进度，但是我无法在组件上显示进度。