如何使用反應顯示從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上傳的圖片？

回答

相關問題