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

Posted 2023-03-22

【中文标题】如何在 React 中分离多个进度百分比

【英文标题】：How to separate multi progress percentage in 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

【参考方案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 以获取第一个文件的进度。