上传多个文件时,我可以显示一个进度百分比.如果我上传多个文件,如何分开进度百分比?
//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以获取第一个文件的进度.