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

大家好日子！我开始学习反应，我想创建一个简单的上传表单。因此，我将图片上传到Firebase存储，并在完成上传时向他们展示，到目前为止，我已经设法将其上传到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) 

    }) 
    }

这是该组件返回

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> 
    );

两者是同一组件上。

感谢您的帮助！

来源

2017-05-19 MichN7

在你如何将参数传递给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); 
    } 
);

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

来源

2017-05-19 00:43:52

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

回答

相关问题