javascript - Angular 获取图像数据并再次将其附加到 FormData

Question

在 Angular 5 中，我通过我的服务从 mongodb 获取 hotelgallery 的图像。所以基本上我得到的数据是这样的

{
  fieldname: "hotelgallery", 
  originalname: "e.jpg", 
  encoding: "7bit", 
  mimetype: "image/jpeg", 
  destination: "./public/",
  encoding : "7bit",
  filename : "1521139307413.jpg"
  mimetype : "image/jpeg"
  path : "public/1521139307413.jpg"
  size : 66474
}
{
  fieldname: "hotelgallery", 
  originalname: "e.jpg", 
  encoding: "7bit", 
  mimetype: "image/jpeg", 
  destination: "./public/",
  encoding : "7bit",
  filename : "1521139307413.jpg"
  mimetype : "image/jpeg"
  path : "public/1521139307413.jpg"
  size : 66474
}
{
  fieldname: "hotelgallery", 
  originalname: "j.jpg", 
  encoding: "7bit", 
  mimetype: "image/jpeg", 
  destination: "./public/",
  encoding : "7bit",
  filename : "1526753678390.jpg"
  mimetype : "image/jpeg"
  path : "public/1526753678390.jpg"
  size : 66470
}
{
  fieldname: "hotelgallery", 
  originalname: "k.jpg", 
  encoding: "7bit", 
  mimetype: "image/jpeg", 
  destination: "./public/",
  encoding : "7bit",
  filename : "7865456789413.jpg"
  mimetype : "image/jpeg"
  path : "public/7865456789413.jpg"
  size : 66300
}

现在我想再次将这些数据附加到 FormData 但它不起作用。

到目前为止我所做的代码

export class HotelEditComponent implements OnInit {
   formData = new FormData();
   ngOnInit() {
    this.getOneHotel(this.route.snapshot.params['id']);
   }

 getOneHotel(id) {
    this.http.get( this.apiUrl + '/api/hotel/' + id).subscribe(data => {
      this.hotel = data;
      this.appendImages(data['hotelimages']); //Here I am getting the data as mentioned here
    });
 }

 public appendImages(imagedata) {
    for (var i = 0; i < imagedata.length; i++) {
      console.log(imagedata[i]);
      this.formData.append('hotelgallery', imagedata[i], imagedata[i]['originalname']);
    }
    console.log(this.formData);
  }
 }

那么有人能告诉我如何将现有图像数据附加到 FormData 吗？任何帮助和建议都将不胜感激。

用例: 实际上我曾使用 formData 以 Angular 上传图像。现在在编辑页面中图像显示正常。但是假设用户编辑了一些数据并上传了一些图像或删除了一些图像。在那种情况下，我从数据库中获取图像并再次尝试使用 formdata 上传它们。

我已经使用 this 模块和 nodejs 的 multer 来使用 formData 上传图像。

Answer 1

So can someone tell me how can I append the existing image data to FormData? Any help and suggestions will be really appreciable.

其实这种方式需要更多的添加脚本解决。例如

<强>1。从服务器获取图像 Blob

由于您返回图像的细节对象，而不是 blob。您需要有一个端点才能作为 blob 返回。 (或者如果作为数据缓冲区返回然后它转换为 blob 你可以使用 BlobUtil )

<强>2。放Blob追加表单数据

您需要使用 blob 在参数 2 中附加没有路径，请参阅 documentation .

name

The name of the field whose data is contained in value.

value

The field's value. This can be a USVString or Blob (including subclasses such as File).

filename Optional

The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob". The default filename for File objects is the file's filename.

这就是您所需要的，但那是不好的做法。

比方说，您有 30 张图片要编辑，然后您需要请求 blob 端点来获取要附加的这些图片 blob。但是用户只想更新 1 张图像，浪费时间请求图像 blob，对吗？

对于编辑图像，通常我们不需要附加到文件形式(<input type="file" />)。

只需将其显示为缩略图即可查看上传的图片并让文件为空。

我们通常做的是缩略图。

当用户要更改什么时，用户放入新图像并用新图像替换旧图像并更新数据库。

如果不是，则不为图像做任何事情。 ( YAGNI )