angular获取图像数据并再次将其附加到FormData [英] angular get image data and again append it to FormData

问题描述

在角度5中，我通过我的服务从mongodb获取hotelgallery的图像。基本上我得到的数据就像这样

In angular 5 I am getting the images for hotelgallery from mongodb through my service. So basically the data what I am getting is like this

{
  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但它无效。

Now I want to again append those data to FormData but its not working.

到目前为止我所做的代码

The code what I have done so far

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？任何帮助和建议都会非常明显。

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

UseCase：
实际上我曾使用formData以角度上传图像。现在在编辑页面中，图像显示正常。但是，让我们说用户编辑一些数据并上传一些图像或删除一些图像。在这种情况下，我从数据库中获取图像并再次尝试使用formdata上传它们。

UseCase for this: Actually I had used formData to upload images in angular. Now in the edit page the images are showing fine. But lets say a user edits some data and upload some images or remove some images. In that case I am getting the images from the database and again trying to upload them with formdata.

我使用了这个模块和milter for nodejs用formData上传图像。

I have used this module and multer for nodejs to upload images with formData.

推荐答案

所以有人可以告诉我如何将现有的图像数据附加到FormData？任何帮助和建议都会非常明显。

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

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

Actually, this approach need more add script solution. for example

1。从服务器获取图像Blob

因为返回图像的细节对象，而不是blob。您需要有一个端点作为blob返回。 （或者如果作为数据缓冲区返回，则转换为blob，您可以使用 BlobUtil ）

Since you return detail object of images, not with the blob. You need have a endpoint to return as blob. (or if return as data buffer then it transform to blob you can use BlobUtil)

2。将Blob添加到表单数据

您需要使用blob追加参数2而不是路径，请参阅文档。

You need use blob to append in param 2 no a path, see documentation.

名称

数据包含在值中的字段的名称。

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

值

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

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

文件名可选

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

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.

这就是你所需要的，但那是坏的实践即可。

That what you need, but that is bad practice.

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

Let's say, you have 30 images to edit, then you need request blob endpoint to get those images blob to appends. But user only want to update 1 image, wasting time to request image blob, right?

对于编辑图片，通常我们不需要追加提交表格（< input type =file/> ）。

For edit image usually we don't need append to file form (<input type="file" />).

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

Just show it as thumbnail to see what image uploaded and let file form empty.

我们通常做什么，缩略图图像。

What we do usually, thumbnail that image.

当用户要更改内容时，用户将新图像替换为旧图像并将其替换为新的想要和更新数据库。

When user what to change, user put new image and replace old image with new want and update database.

如果没有，请不要为图像做任何事情。 （ YAGNI ）

if not, do nothing for image. (YAGNI)

这篇关于angular获取图像数据并再次将其附加到FormData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！