如何在 React 中分离多个进度百分比答案

【问题标题】：How to separate multi progress percentage in React如何在 React 中分离多个进度百分比
【发布时间】：2018-11-29 03:55:42
【问题描述】：

我可以在上传多个文件时显示一个进度百分比。如果我上传多个文件，如何分隔进度百分比？

//multi upload
fileuploadHandler = () => {

    const storageRef = fire.storage().ref();
    this.state.file.forEach((file) => {

      storageRef
          .child(`images/${file.name}`)
          .put(file).then((snapshot) => {
            var uploadTask = storageRef.child(`images/${file.name}`).put(file);
            uploadTask.on('state_changed', (snapshot) =>{
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            var    fixprogress = progress.toFixed(2);
                this.setState({fixprogress});
                console.log('Upload is ' + fixprogress + '% done');
            })


      })

    });

  }

这是我的按钮并显示进度百分比。

<button className="loginBtn2 loginBtn--U" onClick={this.fileuploadHandler}>  Upload!</button> 
                            uploading {this.state.fixprogress}

【问题讨论】：

标签： javascript reactjs firebase firebase-storage progress

【解决方案1】：

使用传递给forEach 的第二个参数，您将获得一个索引。使用它来识别不同的文件并以不同的方式显示它们，如下所示：

//multi upload
fileuploadHandler = () => {

    const storageRef = fire.storage().ref();
    // USE THE SECOND PARAMETER: INDEX
    this.state.file.forEach( (file, index) => {

      storageRef
          .child(`images/${file.name}`)
          .put(file).then((snapshot) => {
            var uploadTask = storageRef.child(`images/${file.name}`).put(file);
            uploadTask.on('state_changed', (snapshot) =>{
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            var    fixprogress = progress.toFixed(2);
            // NOW USE IT TO DISPLAY SPECIFIC STATE FOR THAT FILE
            this.setState( { progress: { ( "file" + index ) : fixprogress} } );
            // LOG THE STATE
            console.log('Upload for file number #' + index + ' is ' + fixprogress + '% done');
            })
      })
    });
  }

在这种情况下，您然后检索this.state.progress.file0 以获取第一个文件的进度。

【讨论】：