我想将图像 URL 作为 json 数据上传到我的 Angular 表单并将其发送到服务器。图片 URL 来自服务器响应

Posted 2023-03-11

【中文标题】我想将图像 URL 作为 json 数据上传到我的 Angular 表单并将其发送到服务器。图片 URL 来自服务器响应

【英文标题】：I want to upload an image URL to my angular form as json data and send it to server. the image URL is from the server response

【发布时间】：2019-04-19 16:24:09

【问题描述】：

我想将图像 URL 作为 json 数据上传到我的 Angular 表单并将其发送到服务器。服务器应响应图像 URL。 那是因为服务器重命名了图像，我想从服务器获取图像的 URL，然后将其放入我的表单中，然后将表单提交到服务器。 这是图片上传到服务器：

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",

,

【问题讨论】：

你尝试了什么？正如How to Ask 中所述，我们不是来为您编写代码，而是向我们展示您尝试过的内容和无效的内容。

【参考方案1】：

通常，文件不被视为表单的一部分。它们被添加到form，但处理方式不同。原因是文件上传通常是异步的，并且在大多数情况下，通常不会在表单提交时上传。

相反，它们首先被上传，然后它们的下载 URL 被添加到表单值中，这正是您想要的方式。

因此，要处理您的情况，您可以执行以下操作：

从您的productForm 中删除imgFront 和imgBack。 在您的组件上声明 imgFront 和 imgBack 属性。 除非设置了imgFront 和imgBack，否则请禁用表单中的Submit 按钮。 设置完成后，启用提交按钮。 在将响应发送到产品 API 时，将 imgFront 和 imgBack 也添加到请求负载中。

这里有一个Sample StackBlitz 供您参考。

【讨论】：

@HamzaHajyousef，我很高兴它做到了。也请考虑接受这个作为结束循环的答案。 :) 快乐编码。