Angular调用getUrl时报Cannot read property 'name' of undefined如何解决

问题根源 #

你遇到的两个报错核心原因如下：

• 运行时报错Cannot read property 'name' of undefined：组件ngOnInit阶段直接调用getUrl时，UploadService的file属性还没有被uploadFile方法赋值，处于undefined状态，直接读取name属性触发空指针
• 编译时报错Property 'file' is used before its initialization：TypeScript严格类初始化检查规则下，你声明了file: File但没有给初始值，也没有在构造函数中完成赋值，触发语法检查报错

修复方案 #

1. 修改UploadService代码 #

import { Injectable, Inject } from '@angular/core';
import { AngularFireStorage } from '@angular/fire/storage';
import { User, NgAuthService } from '../auth/auth.service';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class UploadService {
  constructor(private afStorage: AngularFireStorage, @Inject(NgAuthService) private user: User) { }
  // 标记为可选类型，默认值为undefined，解决类初始化检查报错
  file?: File;
  // 用可观察对象存储url，组件可以订阅自动更新
  private urlSubject = new BehaviorSubject<string>('');
  public url$ = this.urlSubject.asObservable();
  iUser = this.user.uid;
  basePath = `/uploads/images/${this.iUser}`;

  // 上传文件到firebase存储的方法
  async uploadFile(event: any) {
    const selectedFile = event.files?.[0];
    if (!selectedFile) {
      console.log("Select a image please.")
      return;
    }
    this.file = selectedFile;
    const filePath = `${this.basePath}/${this.file.name}`;
    await this.afStorage.upload(filePath, this.file);
    // 上传完成后直接把文件对象传递给getUrl，满足参数传递需求
    await this.getUrl(this.file);
    // 可选补充：上传成功后把当前文件名存入用户Firestore文档，方便初始化时读取
  }

  // 支持传入文件对象/文件名，不传参数则默认读取实例上的file属性
  async getUrl(fileOrName?: File | string) {
    let fileName: string;
    // 优先处理传入的参数，避免依赖全局状态
    if (fileOrName instanceof File) {
      fileName = fileOrName.name;
    } else if (typeof fileOrName === 'string') {
      fileName = fileOrName;
    } else if (this.file) {
      fileName = this.file.name;
    } else {
      // 没有可用文件名直接返回，避免空指针报错
      console.log("No valid file info to get download url");
      return;
    }
    const filePath = `${this.basePath}/${fileName}`;
    const snap = this.afStorage.storage.ref(filePath);
    try {
      const url = await snap.getDownloadURL();
      this.urlSubject.next(url);
      console.log(url);
    } catch (e) {
      console.error("Get download url failed:", e);
    }
  }

  // 组件初始化调用的专用方法，传入你提前存到用户信息里的历史文件名即可
  async initAvatarUrl(savedFileName: string) {
    await this.getUrl(savedFileName);
  }
}

2. 修改user-profile.component.ts代码 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { UploadService } from '../../storage/upload.service';
import { AngularFireStorage } from '@angular/fire/storage';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss'],
})
export class UserProfileComponent implements OnInit, OnDestroy {
  constructor(
    public uploadService: UploadService,
    public afStorage: AngularFireStorage,
    ) { }

    image = '';
    private urlSub?: Subscription;

  ngOnInit() {
    // 订阅url变化，自动更新页面显示
    this.urlSub = this.uploadService.url$.subscribe(url => {
      this.image = url;
    });
    // 初始化场景：传入你从用户信息中读取的历史上传文件名即可拿到对应url
    // const savedAvatarName = 从用户Firestore文档/本地存储读取的历史文件名
    // if(savedAvatarName) this.uploadService.initAvatarUrl(savedAvatarName)
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.urlSub?.unsubscribe();
  }
}

修复说明 #

• 满足拆分两个独立方法的需求：uploadFile只处理上传逻辑，getUrl只处理获取下载地址逻辑，通过参数传递文件信息，没有强耦合
• 解决初始化调用需求：新增的initAvatarUrl方法支持传入历史文件名，不需要依赖上传动作产生的文件对象也能拿到用户之前上传的文件url
• url状态用可观察对象管理，上传完成后页面会自动刷新显示最新地址，不需要手动同步状态

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