Firebase.storage：从 React 表单上传文件答案

【问题标题】：Firebase.storage: uploading file from React formFirebase.storage：从 React 表单上传文件
【发布时间】：2017-07-31 14:12:09
【问题描述】：

我正在尝试将之前在 React 表单的输入元素中选择的一些文件上传到 Firebase 存储

它是一个处理程序：将文件对象传递给上传器并等待（我想这样做）从它返回。

// comes from input-type element, contains icon picture 
handleIconFile =(e) => {
const iconFile = e.target.files[0]

// try to upload in order to get download url
  const downloadURL = uploadFile(iconFile, ()=>{

  // takes some time ...
  console.log(downloadURL);

  // store url to state
  this.setState({ downloadURL })
  })
}

它是上传者：它取自 firebase 文档并在成功处理程序中添加了 return 语句

/** takes File Object to upload to storage
    returns url for download this file from firebase */
uploadFile = (iconFile) => {

    // root reference
    const fileName = iconFile.name
    console.log(fileName);
    // const metadata = { contentType: 'image/jpeg' }
    const storageRef = storage.ref()
    const uploadTask = storageRef.child('/icon/'+ fileName).put(iconFile)

    // Register three observers:
    // 1. 'state_changed' observer, called any time the state changes
    // 2. Error observer, called on failure
    // 3. Completion observer, called on successful completion
    uploadTask.on('state_changed', function(snapshot){
      // Observe state change events such as progress, pause, and resume
      // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
      var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log('Upload is ' + progress + '% done');
    }, function(error) {
      // Handle unsuccessful uploads
      console.log('error:', error);
    }, function() {
      // Handle successful uploads on complete
      var downloadURL = uploadTask.snapshot.downloadURL;
      // console.log(downloadURL);
      return downloadURL // <--- I did add this myself in order to return it back to handler
    });
}

文件已成功加载。在控制台中我看到：Upload is 0% done Upload is 100% done

问题是：downloadURL 不返回处理程序。我可以在上传者的成功部分看到它——// console.log(downloadURL);，但在其他任何地方都看不到。

【问题讨论】：

当uploadFile 只接受一个参数时，为什么要向它传递第二个参数（一个函数）？您是否期望它会在文件上传后执行？
@nshoes，我确实这么认为，但现在我认为在uploadFile 函数的成功部分执行我需要的东西会更好，例如：} var downloadURL = uploadTask.snapshot.downloadURL; backFire(downloadURL); }) const backFire = (url) => { console.log(url); this.setState({ downloadURL: url }) } 看起来很奇怪，但这是唯一的方法我发现在异步世界中返回一些东西。

标签： javascript reactjs firebase firebase-storage

【解决方案1】：

您似乎正在尝试使用 callback 执行此操作，请尝试以下操作 -

handleIconFile =(e) => {
  const iconFile = e.target.files[0]

  uploadFile(iconFile, result => {

    if (result.progress) {
      // Handle progress
      return;
    }

    if (result.downloadURL) {
      this.setState({ result.downloadURL });
      return;
    }

    if (result.error) {
      // Handle error
    }
  });
}

uploadFile = (iconFile, callback) => {

  const fileName = iconFile.name
  const storageRef = storage.ref()
  const uploadTask = storageRef.child('/icon/'+ fileName).put(iconFile)

  uploadTask.on('state_changed', snapshot => {
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    callback({ progress });
  }, error => {
    callback({ error });
  }, () => {
    var downloadURL = uploadTask.snapshot.downloadURL;
    callback({ downloadURL });
  });
}

【讨论】：