2017-07-29 106 views
0

試圖將文件對象傳遞給redux動作並執行redux動作內部的函數,但不確定它的正確方法?但基本上我想從firebase上傳下載完成,以便我可以顯示圖像前端。React Redux Firebase上傳文件對象

createLocation(event) { 
    event.preventDefault(); 
    const fileObject = this.state.file; 

    const test = { 
     fileObject 
    } 

    this.props.uploadImage_func(test); 
} 

和行動功能:

export function uploadImage_func(fileObject) { 
    return dispatch => { 
     const fileName = 'myimage'; 
     const storageRef = firebase.storage().ref('test/' + fileName); 
     const task = storageRef.put(fileObject); 

     task.on('state_changed', 
      function complete(snapshot) { 
       const downloadURL = task.snapshot.downloadURL; 
      }, 
     ).then(function() { 

      dispatch(attemptLogin({ 
       ...downloadURL 
      })); 

     }); 
    } 
} 

錯誤:

enter image description here

回答

0

正如你可以看到你有一個錯誤Invalid argument in 'put' at index 0: Expected Blob or File。所以首先你需要路徑完全是File或Blob。如果你做得對createLocation並得到了文件對象比你不需要把它包在const test對象更多。這種行爲會導致不必要的嵌套,因此只需路徑fileObject。和更多。當您認購火力UploadTask on事件中,你需要的路徑回調函數和做一個正確的順序,所以儘量用下一個:

uploadTask.on('state_changed', 
    (snapshot) => { 
    // here you could log loading information in percents but uploading is not finished yes 
    console.log((snapshot.bytesTransferred/snapshot.totalBytes) * 100); 
    }, 
    (error) => console.log(error), 
() => { 
    // And after uploading is complete you could get your download url 
    console.log('Call save img', uploadTask.snapshot.downloadURL); 
    } 
); 

欲瞭解更多信息,請閱讀documentation for Firebase Storage (Upload files)