javascript – 如何在React中分离多进度百分比

上传多个文件时,我可以显示一个进度百分比.如果我上传多个文件,如何分开进度百分比？

//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}

解决方法:

使用传递给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以获取第一个文件的进度.

标签：javascript,reactjs,progress,firebase,firebase-storage
来源： https://codeday.me/bug/20190710/1425378.html