Firebase 存储上传错误：无法读取未定义的属性“子”

Posted 2023-02-22

【中文标题】Firebase 存储上传错误：无法读取未定义的属性“子”

【英文标题】：Firebase Storage upload error: Cannot read property 'child' of undefined

【发布时间】：2021-07-05 20:21:25

【问题描述】：

我在 Vue.js 应用程序中使用 Firebase 存储，在我的表单中使用 Vuetify 我想上传一张照片，我使用这个 example in the docs 但不起作用，我想将我的图像存储在文件夹 itens

我的 v 文件输入：

 <v-col>
   <v-file-input v-model="imageItem" chips multiple label="Photo"></v-file-input>
 </v-col>

我使用文档上传示例的方法：

methods: 
    addNovoProduto: function () 
      var file = this.imageItem[0]
     
      let uploadTask = firebase.storageRef.child('itens/' + file.name).put(file);

      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');
      switch (snapshot.state) 
        case firebase.storage.TaskState.PAUSED: // or 'paused'
          console.log('Upload is paused');
          break;
        case firebase.storage.TaskState.RUNNING: // or 'running'
          console.log('Upload is running');
          break;
      
    , function(error) 
      // Handle unsuccessful uploads
      console.log(error);
    , function() 
      // Handle successful uploads on complete
      // For instance, get the download URL: https://firebasestorage.googleapis.com/...
      uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) 
        console.log('File available at', downloadURL);
      );
    );
    ,
  ,

错误是：TypeError: Cannot read property 'child' of undefined

【参考方案1】：

如果您查看链接的文档页面的顶部，您会看到 storageRef 被初始化为：

var storageRef = firebase.storage().ref();

你似乎没有这样做，这可以解释你得到的错误。

【讨论】：

我需要在哪里声明storageRef？

其实没太大关系，只要在你使用前就可以了。