Angular使用ng-upload上传文件时报reading 'memes'未定义类型错误

问题原因 #

报错指向this.member.memes.push(meme)这行出现未定义属性读取错误，存在两种常见触发场景：

1. this.member 本身未完成初始化
   你在ngOnInit阶段就初始化了上传器，但member数据通常是从后端接口异步拉取的。如果上传完成的回调触发时，member的接口请求还没返回，就会出现this.member为undefined的情况。
2. this.member.memes 数组未初始化
   你提到逻辑一致的照片上传功能正常，可以检查下照片功能中是否对photos数组做了初始化处理。新增的memes属性如果没有手动初始化，后端返回的当前用户数据中如果还没有meme记录，memes会是null而非空数组，直接调用push方法就会报错。

解决方案 #

• 先加日志定位具体问题：在onSuccessItem回调开头打印console.log(this.member, this.member?.memes)，确认是member未定义还是memes未定义
• 针对member未初始化的情况：
  给上传按钮加禁用条件，确保member加载完成后才允许上传：

  <button type="button" class="btn btn-success btn-s"
          (click)="uploader.uploadAll()" 
          [disabled]="!uploader.getNotUploadedItems().length || !member">
    <span class="fa fa-upload"></span> Upload all
  </button>
  

• 针对memes数组未初始化的情况：
  在拉取到member数据后手动初始化数组：

  // 你的member接口请求回调中加入这句
  if (!this.member.memes) this.member.memes = []
  

  也可以在push前做兼容处理：

  this.uploader.onSuccessItem = (item, response, status, headers) => {
    if (response) {
      const meme: Meme = JSON.parse(response);
      // 兼容处理
      if (!this.member) return;
      if (!this.member.memes) this.member.memes = [];
      this.member.memes.push(meme);
      this.user.memeUrl = meme.url;
      this.member.memeUrl = meme.url;
      this.accountService.setCurrentUser(this.user);
    }
  }
  

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