Angular报错：Cannot read properties of undefined reading 'base64' 求助

核心问题是你的onChange方法仅保存了事件对象，没有将选中的图片转换为base64格式并赋值给selectedPicture变量，导致调用saveImage时该变量未定义。

修复步骤： #

1. 声明并初始化selectedPicture变量
   在组件类中提前声明变量，避免未初始化导致的undefined：

selectedPicture: { base64: string } = { base64: '' };
imageChangedEvent: Event | null = null;

2. 修改onChange方法，处理图片转base64
   通过FileReader读取选中的图片文件，转换为base64格式后赋值给selectedPicture：

onChange(event: Event) {
  this.imageChangedEvent = event;
  const input = event.target as HTMLInputElement;
  if (input.files && input.files[0]) {
    const file = input.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
      this.selectedPicture.base64 = e.target?.result as string;
    };
    reader.readAsDataURL(file);
  }
}

3. 完善saveImage方法的空值校验
   添加判断确保图片已选择后再发起请求，避免无效调用：

saveImage() {
  if (!this.selectedPicture.base64) {
    console.log('请先选择图片');
    return;
  }
  console.log(this.selectedPicture);
  this.apiService.postData('educational-award/', {
    "photo": this.selectedPicture.base64,
    "id": this.educationalData.id
  }).subscribe({
    next: (data) => {
      console.log('图片上传成功', data);
    },
    error: (err) => {
      console.error('图片上传失败', err);
    }
  });
}

额外优化提示： #

• 若后端不需要base64前缀（如data:image/png;base64,），可在赋值时去除：

this.selectedPicture.base64 = (e.target?.result as string).split(',')[1];

• 确认educationalData.id已正确初始化，避免后续请求出现新的undefined问题

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