角度获取图像数据并再次将其附加到 FormData

在 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 以角度上传图像。现在在编辑页面中图像显示正常。但假设用户编辑了一些数据并上传了一些图像或删除了一些图像。在这种情况下，我从数据库获取图像，并再次尝试使用 formdata 上传它们。

我用过this https://aberezkin.github.io/ng2-image-upload/#/demoNodejs 使用 formData 上传图像的模块和 multer。

那么有人可以告诉我如何将现有的图像数据附加到 FormData 中吗？任何帮助和建议都将非常感激。

实际上，这种方法需要更多添加脚本解决方案。例如

1. 从服务器获取图像Blob

由于您返回图像的详细对象，而不是斑点。您需要有一个端点以 blob 形式返回。 （或者如果作为数据缓冲区返回，那么它会转换为 blob，您可以使用BlobUtil https://github.com/nolanlawson/blob-util)

2.将Blob追加到表单数据中

您需要使用 blob 在参数 2 中附加无路径，请参阅文档 https://developer.mozilla.org/en-US/docs/Web/API/FormData/append#Syntax.

name

value 中包含其数据的字段的名称。

value

字段的值。这可以是 USVString 或 Blob（包括子类） 例如文件）。

文件名 可选

报告给服务器的文件名 （USVString），当 Blob 或文件作为第二个参数传递时。 Blob 对象的默认文件名是“blob”。默认文件名 对于文件对象来说，是文件的文件名。

这就是你所需要的，但那就是不好的做法.

假设您有 30 个图像要编辑，那么您需要请求 blob 端点来获取要附加的这些图像 blob。但用户只想更新 1 个图像，浪费时间来请求图像 blob，对吧？

For edit图像通常我们不需要附加到文件形式（<input type="file" />).

只需将其显示为缩略图即可查看上传的图像并将文件表单留空。

我们通常所做的就是对该图像进行缩略图。

当用户要更改内容时，用户放置新图像并用新图像替换旧图像并更新数据库。

如果不是，则不对图像执行任何操作。 (YAGNI https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it)