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

Question

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

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

我已经使用这个模块和multer for nodejs用formData上传图像。

Answer 1

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

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

1.从服务器获取Image Blob

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

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

你需要使用blob附加在param 2中没有路径，请参阅文档 。

名称

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

值

该领域的价值。 这可以是USVString或Blob（包括诸如File之类的子类）。

filename可选

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

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

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

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

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

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

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

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

Answer 2

FormData的附加在这里默默地失败了。 您需要将“图像”附加为blob。 请参阅MDN文档 。

formData.append('hotelgallery', new Blob([imagedata[i]], { type: "text/xml"}), imagedata[i]['originalname']);

另外，只是打印formData不会显示任何内容，而是尝试：

console.log(this.formData.getAll('hotelgallery'));

要么

for (var value of this.formData.values()) {
   console.log(value);
}

Answer 3

但是，让我们说用户编辑一些数据并上传一些图像或删除一些图像。 在这种情况下，我从数据库中获取图像，并再次尝试使用formdata上传它们。

因此，您可以将对象传递给通用方法，并将结果传递给formData 。 对象数据甚至可以包含嵌套对象。

 static createFormData(object: Object, form?: FormData, namespace?: string): FormData {
        const formData = form || new FormData();
        for (let property in object) {

            if (!object.hasOwnProperty(property) || object[property] === undefined) {
                continue;
            }

            const formKey = namespace ? `${namespace}[${property}]` : property;

            if (object[property] instanceof Date) {                 
                formData.append(formKey, object[property].toISOString());
            } else if (typeof object[property] === 'object' && !(object[property] instanceof File)) {
                this.createFormData(object[property], formData, formKey);
            }
            else if (typeof object[property] === 'number') {
                let numberStr = object[property].toString().replace('.', ',');
                formData.append(formKey, numberStr);
            }
            else {
                formData.append(formKey, object[property]);
            }
        }

        return formData;
    }
}

在Component类中：

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

 getOneHotel(id) {
    this.http.get( this.apiUrl + '/api/hotel/' + id).subscribe(data => {
      this.hotel = data;
    });
 }

 postToServer() {
  // or even can pass full `this.hotel` object
  // this.helperService.createFormData(this.hotel) 
  this.formData = this.helperService.createFormData(this.hotel['hotelimages']) 
  this.service.post(this.formData);

 }
...
}

Answer 4

看起来您正在尝试附加JSON数组，因为formData.append只能接受字符串或blob，请尝试使用JSON.stringify（）方法将数组转换为JSON字符串。 （另）

我认为你可以替换

this.appendImages(data['hotelimages']);

同

this.formData.append('hotelgallery', JSON.stringify(data['hotelimages']));

Answer 5

这更像是一个设计问题，而不是技术问题。 您要求再次发布FormData，并且您想再次获取图像数据。

现在让我们来看看你当前的设计。

1. 用户上传3张图像，每张图片大小为4MB
2. 在您的编辑页面上，您可以下载每个图像。 成本= 12MB
3. 在编辑页面上，用户删除2个图像并添加2个图像。 成本= 12MB
4. 因此，更新8个8MB图像的最终成本是24MB。 这是很多

现在在确定如何做FormData之前，找出适合您应用的设计。

考虑一下OLX网站，它允许您发布广告并稍后进行编辑。 编辑和删除图像时，他们会调用API来删除图像

我认为理想的设计如下

• 提交您的创建中的所有图像
• 对于编辑，请为图像创建添加和删除端点

在编辑表单上再次提交文本数据是可以的，但是在编辑表单上再次提交相同的图像数据是绝对没有问题的。 重新考虑你的设计