Ionic中用AngularFire上传Firebase图片遇.ref属性不存在错误

嘿，这个问题其实挺典型的——你把模块和服务搞混啦！让我给你一步步理清楚：

问题根源 #

你在组件里导入并尝试使用的AngularFireStorageModule，是用来在根模块中注册Firebase存储功能的模块，它本身并没有.ref()这类操作方法。真正提供存储操作（比如.ref()、.put()）的是AngularFireStorage这个服务。

修复步骤 #

1. 修正组件中的导入语句
   把组件里的AngularFireStorageModule导入换成AngularFireStorage服务：

   // 替换前
   import { AngularFireStorageModule } from 'angularfire2/storage';
   // 替换后
   import { AngularFireStorage } from 'angularfire2/storage';
   

2. 在组件构造函数中正确注入服务
   确保你的组件构造函数里注入的是AngularFireStorage服务，而不是模块：

   constructor(
     private storage: AngularFireStorage,
     // 其他你需要的服务，比如AngularFireAuth、AngularFirestore
   ) { }
   

3. 确认根模块中已导入AngularFireStorageModule
   别忘啦，AngularFireStorageModule需要在你的根模块（比如AppModule）的imports数组里注册，这样服务才能正常工作：

   // app.module.ts
   import { AngularFireStorageModule } from 'angularfire2/storage';
   
   @NgModule({
     imports: [
       // 其他模块
       AngularFireStorageModule
     ]
   })
   export class AppModule { }
   

修正后的上传代码示例 #

现在你的上传代码应该能正常运行了，这里贴一下修正后的核心代码：

for(var i = 0; i < this.imagePaths.length; i++){
  console.log("Adding photo's" + this.imagePaths[i]);
  const filePath = 'images/' + this.docRef + '/';
  const ref = this.storage.ref(filePath);
  const task = ref.put(this.imagePaths[i]).then((snapshot) => {
    console.log('Uploaded an image!');
  });
}

简单来说，模块是用来“开启”功能的开关，服务才是你在组件里直接调用方法的对象，别把这俩搞混就好啦！

内容的提问来源于stack exchange，提问作者jonas