如何使用 React 显示从 firebase 上传的图片？

Question

大家好！我开始学习 React，我想创建一个简单的上传表单。所以我正在将图像上传到 firebase 存储，我想在它们完成上传时显示它们，到目前为止，我已经设法将它们上传到 firebase 存储，但它们没有显示在页面上。我究竟做错了什么？这是我用来处理用户单击上传按钮时的事件的方法：

handleOnChange(event){
const file= event.target.files[0];
const storageRef = firebase.storage().ref(`fotos/${file.name}`);
const task = storageRef.put(file);
task.on('state_changed', (snapshot) => {
      let percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
      this.setState({
        uploadStatus: percentage,
      }),
      (error) => {
      console.error(error.message)
    },
    this.setState({
        picture:task.snapshot.downloadURL
    })
      console.log(task.snapshot.downloadURL)

    })
  }

这是什么组件returns

return (
      <div>
      <progress value={this.state.uploadStatus} max="100">
        {this.state.uploadStatus}%
      </progress>

      <input type='file' onChange={this.handleOnChange.bind(this)}/>
      <div id='gallery'>

        < img src={this.state.picture}/>

      </div>
      </div>
    );

两者在同一个组件上。

感谢您的帮助！

Answer 1

您向 on 方法传递参数的方式似乎存在语法问题。应该是这样的。

task.on(
  "state_changed",
  snapshot => {
    let percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
    this.setState({ uploadStatus: percentage });
  },
  error => {
    console.error(error.message);
  },
  () => {
    this.setState({ picture: task.snapshot.downloadURL });
    console.log(task.snapshot.downloadURL);
  }
);

如果箭头函数中需要多条语句，应该用方括号括起来。

如何使用 React 显示从 firebase 上传的图片？

How can I show uploaded images from firebase using react?

javascript

web

firebase

reactjs

firebase-storage