Javascript Firebase.storage:从React表单上载文件

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

它是一个处理程序：将文件对象传递给uploader，并等待（我愿意这样做）它的返回

// 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文档，并在成功处理程序中添加了返回语句

/** 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
    });
} 

/**将文件对象上载到存储器
返回从firebase下载此文件的url*/
上传文件=（iconFile）=>{
//根引用
const fileName=iconFile.name
log（文件名）；
//常量元数据={contentType:'image/jpeg'}
const storageRef=storage.ref（）
const uploadTask=storageRef.child（'/icon/'+fileName）.put（iconFile）
//登记三名观察员：
//1.“state_changed”观察者，在状态更改时随时调用
//2.错误观察者，故障时调用
//3.完工观察员，要求成功完工
uploadTask.on（'state_changed'，函数（快照）{
//观察状态更改事件，如进度、暂停和恢复
//获取任务进度，包括上载的字节数和要上载的总字节数
var progress=（snapshot.bytesttransfered/snapshot.totalBytes）*100；
log（'Upload is'+progress+'%done'）；
}，函数（错误）{
//处理不成功的上传
console.log（'error:'，error）；
}，函数（）{
//处理完成后的成功上载
var downloadURL=uploadTask.snapshot.downloadURL；
//log（下载URL）；
return downloadURL/看起来您正试图使用
回调来执行此操作，请尝试以下操作-

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

看起来您正试图使用
回调来执行此操作，请尝试以下操作-

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

当uploadFile只接受一个参数时，为什么要将第二个参数（一个函数）传递给uploadFile？是否希望在上传文件后执行该参数？@nshoes，我确实这么认为，但现在我认为最好执行
uploadFile
函数的成功部分中所需的内容，如：
}var downloadURL=uploadTask.snapshot.downloadURL；backFire（downloadURL）；}）const backFire=（url）=>{console.log（url）；this.setState（{downloadURL:url}）}
看起来很奇怪，但这是我在异步世界中发现的唯一返回内容的方法。当uploadFile只接受一个参数时，为什么要向它传递第二个参数（函数）？您是否希望在上传文件后执行它？@n是的，我确实这么认为，但现在我认为最好执行
uploadFile
函数的success部分所需的内容，例如：
}var downloadURL=uploadTask.snapshot.downloadURL；回火（下载URL）；}）const backFire=（url）=>{console.log（url）；this.setState（{downloadURL:url}）}
看起来很奇怪，但这是我在异步世界中找到的唯一返回内容的方法。