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上传它们。

我使用this模块和multer for nodejs上传带有formData的图片。

Answer 1

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

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

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

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

<强> 2。将Blob附加到表单数据

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

命名

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

值

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

filename可选

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

你需要什么，但这是不良做法。

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

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

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

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

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

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

Answer 2

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

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字符串。（另）

e.g。我想你可以替换

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

带

Angular 5.x

Answer 5

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

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

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

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

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

我认为理想的设计将在

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

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

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

5 个答案: