Я хочу загрузить URL-адрес изображения в мою угловую форму в виде данных json и отправить его на сервер. URL изображения взят из ответа сервера

Question

Я хочу загрузить URL-адрес изображения в мою угловую форму в виде данных json и отправить его на сервер. сервер должен ответить на URL изображения. что, поскольку сервер переименовывает изображение, я хочу получить URL-адрес изображения с сервера, а затем поместить его в форму my и затем отправить форму на сервер.

это загрузка изображения на сервер:

selectedFile: File = null;

onFileSelected(event){
 this.selectedFile = <File>event.target.files[0];
}

onUpload(){
 const fd = new FormData();
 fd.append('imageFile', this.selectedFile, this.selectedFile.name);
 this.http.post('https://localhost:3443/products/upload', fd)
   .subscribe(res => {
     console.log(res);
   });
 }

и это моя форма

 createForm() {
  this.productForm = this.fb.group({
  name: ['', [Validators.required]],
  imgFront: [''],
  imgBack: [''],
});

и это данные JSON

{
  "name": "new product",
  "imgFront": "images/products/0.7578449276506667Photo.png",
  "imgBack": "images/products/0.44058320485375324WhatsApp Image 2018-10-25 at 18.00.23.jpeg",

},

Answer 1

Как правило, файлы не рассматриваются как часть формы.Они добавляются к form, но затем обрабатываются по-разному.Причина в том, что загрузка файлов обычно подразумевает асинхронность, и в большинстве случаев они обычно не загружаются при отправке формы.

Вместо этого они сначала загружаются, а затем их URL-адреса для загрузки добавляются в форму.значение, так, как вы хотите.

Таким образом, чтобы справиться с вашим делом, вы можете сделать следующее:

1. Удалить imgFront и imgBack из вашего productForm.
2. Объявите свойства imgFront и imgBack вашего компонента.
3. Отключите кнопку Submit в форме, если не установлены imgFront и imgBack.
4. После того, как они установлены, включите кнопку отправки.
5. При отправке ответа на API продукта добавьте imgFront и imgBack к полезной нагрузке запроса.

Вот Образец StackBlitz для вашей ссылки.