Как получить url загруженного изображения?

Question

[sgawp]

Это результат, который должен получать при загрузке изображения на сервер.

{
    "url": "2021-12-22/d983d107f38ff22e244d45110913f8036e.webp",
    "name": "wallpape.webp"
}

Как получить url изображения чтобы отправить в форму для сохранения в БД?

service:

upload(image: File): Observable<ImgI> {
    const fd = new FormData();
    fd.append('image', image, image.name);
    return this._http.post<ImgI>(`${environment.url}/api/upload`, fd);
  }

ts:

image!: File;

form!: FormGroup;
user!: UserI;

imagePreview = '';

@ViewChild('input') input!: ElementRef;

ngOnInit(): void {
  this.initializeForm();
  this.userService
    .getPerson()
    .pipe(
      tap((user) => {
        this.form.get('email')?.setValue(user.email);
        this.form.get('image')?.setValue(this.imagePreview);
      })
    )
    .subscribe();
}

initializeForm(): void {
  this.form = this.fb.group({
    email: new FormControl('', Validators.required),
    image: new FormControl(''),
  });
}

onFileSelect(event: any) {
  const file = event.target.files[0];
  this.image = file;

  const reader = new FileReader();

  reader.onload = () => {
    this.imagePreview = reader.result as string;
  };

  reader.readAsDataURL(file);
  this.userService.upload(this.image).subscribe(
    () => {
      console.log(true)
    },
    (error) => {
      console.log(error.error.message);
    }
  );
}

Comments

[lssssssssssl]

Вообще по хорошему сервер не должен получать готовый юрл. Вы должны отправить ему картинку, а он должен сам её сохранить, где нужно, и взять юрл, где он её сохранил

[sgawp]

lssssssssssl, Вы наверное меня не правильно поняли. Когда изображение загружается на сервер то естественно что он сам формирует url и выдает такой результат

{
    "url": "2021-12-22/d983d107f38ff22e244d45110913f8036e.webp",
    "name": "wallpape.webp"
}

.

А теперь мне нужно из этого объекта достать url и сохранить в БД виде строки. Или через клиент не получится достать url?

[lssssssssssl]

sgawp, А сделать так, чтобы сервер сначала сохранил картинку, а потом сразу полученный юрл в базу данных не получится?
Все дела за один запрос

Answer 1

[Николай Турнавиотов]

ответ от сервера - {
"url": "2021-12-22/d983d107f38ff22e244d45110913f8036e.webp",
"name": "wallpape.webp"
} => json, соответственно объект, соответсвенно берётся по ключу obj[url] или как это принято в Angular, не в курсе, какие у вас там "надстройки" могут быть, к сожалению