Angular 6 + Firebase Storage图片库：上传后无法获取下载URL展示图片

我帮你排查了代码里的问题，核心原因是上下文this绑定错误，导致下载URL没有正确保存到Firebase数据库，进而无法在网页中读取并展示图片。下面是具体的修复步骤和优化建议：

1. 修复this绑定问题 #

在upload.service.ts的上传成功回调里，你使用了普通function()定义回调函数，这会让this的上下文指向当前函数，而不是UploadService实例——也就是说，此时this.saveFileData(upload)根本找不到对应的方法，自然没法把带URL的上传数据保存到数据库。

修改代码 #

把普通函数改成箭头函数，箭头函数会继承外部上下文，让this正确指向UploadService：

// 原代码片段
uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
  upload.url = downloadURL;
  console.log('FirstURL', downloadURL);
  console.log('SecondURL', upload.url);
  this.saveFileData(upload); // 这里的this不是UploadService实例
});

// 修改后的代码
uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
  upload.url = downloadURL;
  console.log('FirstURL', downloadURL);
  console.log('SecondURL', upload.url);
  this.saveFileData(upload); // 现在this正确指向UploadService
});

2. 额外优化建议 #

• 完善Upload模型的name属性：你的Upload类定义了name字段，但构造函数里没赋值，建议补充这一行，让数据库记录更完整：

export class Upload {
  $key: string;
  file: File;
  url: string;
  progress: number;
  createdOn: Date = new Date();
  name: string;

  constructor(file: File) {
    this.file = file;
    this.name = file.name; // 新增：把文件名赋值给name属性
  }
}

• 检查数据库权限：确保Firebase Database的规则允许读取uploads节点，否则即使URL保存成功，前端也拿不到数据。测试阶段可以先设置宽松规则（上线后记得改成严格权限）：

{
  "rules": {
    "uploads": {
      ".read": true,
      ".write": true
    }
  }
}

验证步骤 #

1. 修复代码后重新上传一张图片
2. 打开Firebase Database控制台，查看uploads节点，确认每条记录已经包含url字段
3. 调用ImageService的getImages()方法，就能拿到带下载URL的图片数据，之后在网页里用<img [src]="image.url">就能正常展示图片了

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