React Redux Firebase 文件上传答案

【问题标题】：React Redux Firebase File UploadReact Redux Firebase 文件上传
【发布时间】：2018-11-11 03:55:03
【问题描述】：

我是新来的反应。我正在尝试将文件上传到 Firebase，虽然进展顺利，但我似乎无法将图片 url 保存到 pictureUrl 状态。我从 Promise 中提取 url，它工作正常，但是如何从 Promise 中获取 downloadUrl 到 pictureUrl 状态？有什么想法吗？

资料提交

      handleSubmit(e){
          e.preventDefault();
          console.log(this.state.picture)

          this.props.uploadImage(this.state.picture)

        const article = {
          header: this.state.header,
          tagLine: this.state.tagLine,
          articleType: this.state.articleType,
          system: this.state.system,
          body: this.state.body,
          pictureUrl: ???????
      }

      this.props.saveArticle(article);

      console.log('Data saved!')  

      // Resets the state back to nothing
        this.setState({
          header: '',
          tagLine: '',
          articleType: '',
          system: '',
          body: '',
          pictureUrl: ''
        })
      }

Firebase 调用上传文件

           export function saveArticle(article, file){
                return dispatch => database.push(article);
            }

            export function uploadImage(picture){
                    return dispatch => storage.child('/images/' + picture.name).put(picture).then((snapshot) => {


                        snapshot.ref.getDownloadURL().then(function(downloadURL) { 

                        console.log('File available at: ', downloadURL)
                        })
                    })

                    console.log(picture)

            }

【问题讨论】：

标签： reactjs firebase react-redux google-cloud-functions es6-promise

【解决方案1】：

您必须先将其放入状态，然后您才能调用该状态。我也是新手，我以前也有类似的问题。也许你应该看看这个例子。

你必须回调变量。

例如

render{
return{
<PDF
 file={this.state.pdfUrl}
  />
 }
}

https://medium.com/@650egor/react-30-day-challenge-day-4-firebase-photo-upload-delete-f7c59d73ae36

Loading images from Firebase Realtime Database + Storage

【讨论】：