Angular загрузить изображение и сохранить его в Spring-Backend

Question

Я новичок в Angular / Spring и должен хранить (H2-Database) изображение (jpeg / png), и я не совсем уверен, как мне это удастся. Я получаю свой файл в шаблоне как:

<input #img type = "file"  accept="image/jpeg,image/png"  (change)="onFileSelected($event)">

Мой класс компонентов выглядит следующим образом:

private userDto: User = {
    id: 0,
    name: null,
    img: null
  }

  save(name:string){
      this.userDto.name = name;
      this.userService.saveUser(this.userDto).subscribe(
        newUser => this.createdUser = newUser)
  }

  onFileSelected(event){
    this.user.img = event.target.files[0];
  }

И мой сервис (упрощенно):

saveUser(user: User): Observable<User>{
    return this.http.post<User>(this.userURI, user);
  }

Я ловлю пост в Spring, используя @ PostMapping / @ RequestBody. Теперь у меня вопрос: какой тип я должен отправлять и использовать в Angular и Spring [java], чтобы я мог сохранить изображение в бэкэнде и отобразить изображение, которое я только что сохранил, когда оно будет возвращено. (Или что я делаю не так?) Извините за вопрос о дампе, но я никогда раньше не использовал ни Angular, ни Spring. Заранее спасибо

Answer 1

uploadFile( file: File , id : number ) : Observable<any>  
  {  
    let url = this.baseUrl + "uploadImage/" + id ;  

    const formdata: FormData = new FormData();  

    formdata.append('file', file);  

    return this.http.post(url , formdata);  
  }  

аргумент файла типа File извлекается в event.target.files.item (0)

проверьте это для более подробной информации: https://www.javatpoint.com/angular-spring-file-upload-example