Question

this image after set state progress我尝试使用进度条在上传图片时显示百分比但不起作用（它只显示在console.log（）上）

fileuploadHandler = () => {
const storageRef = fire.storage().ref();
this.state.file.forEach((file) => {
  this.setState({ uploading: true })
  storageRef
    .child(`images/${file.name}`)
    .put(file).then((snapshot) => {
      var uploadTask = storageRef.child(`images/${file.name}`).put(file);
    uploadTask.on('state_changed', function(snapshot){
      var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      this.setState({progress});
      console.log('Upload is ' + progress + '% done');
      switch (snapshot.state) {
        case fire.storage.TaskState.PAUSED: // or 'paused'
          console.log('Upload is paused');
          break;
        case fire.storage.TaskState.RUNNING: // or 'running'
          console.log('Upload is running');
          break;
      }

和

<div className='container'>
      {this.state.uploading
        ? <div>
          <div className='load-bar' />
          <progress   value = {this.state.progress} min = "0" max="100" id="uploader">0%</progress>
          <br/><br/>
          <span>Uploading: {this.state.uploader}%</span>
          <h3> {this.state.progress} </h3>


        </div>

Answer 1

您错过了403声明。您需要在每次更新时更新setState。

state of progress

由于var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; this.setState({progress});//add this one没有状态值更新，因此未在UI上显示。

编辑：

将进度的初始值设置为progress

编辑2：

this.state = {
    progress : 0
  }

如何在React中显示进度值

1 个答案: