Angular图片保存接口返回404问题排查：误用API端点

问题现象 #

• 初始阶段：编写的图片保存方法中，console.log可正常打印this.educationalData数据，但尝试从接口获取id时返回undefined。
• 调整后：请求已能携带id为1的参数发送，但接口返回404状态码。

涉及代码 #

Angular前端代码

saveImage() {
  const file = this.imageChangedEvent;
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () =>{
    this.apiService.postData('educational-award/' + this.educationalData[0].id, {
      "photo": reader.result,
      "id": this.educationalData[0].id
    }).subscribe(data =>{
      console.log('test')
    });
  };
}

正确的后端路由（Laravel）

Route::post('/upload-picture', [UserController::class, 'uploadPicture']);

问题根源 #

之前请求使用了错误的API端点，导致接口返回404，修正为上述正确路由即可解决。

补充说明截图 #

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