角度获取图像数据，并再次将其附加到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？ 任何帮助和建议都将非常可观。
UseCase为此：其实我已经使用formData上传角度的图像。 现在在编辑页面中图像显示正常。 但让我们说一个用户编辑一些数据并上传一些图片或删除一些图片。 在这种情况下，我从数据库中获取图像，并再次尝试使用formdata上传它们。
我已经使用这个模块和nodejs的multer上传formData的图像。
那么有人可以告诉我如何将现有的图像数据追加到FormData？ 任何帮助和建议都将非常可观。
实际上，这种方法需要更多的添加脚本解决方案。 例如
1.从服务器获取Image Blob
既然你返回图像的细节对象，而不是与blob。 您需要让端点以blob的形式返回。 （或者如果作为数据缓冲区返回，那么它转换为blob，你可以使用BlobUtil）
2.将Blob添加到表单数据
你需要使用blob来追加参数2没有路径，请参阅文档。
名称
数据包含在值中的字段的名称。
值
该字段的值。 这可以是USVString或Blob（包括诸如File之类的子类）。
filename可选
当Blob或文件作为第二个参数传递时，文件名报告给服务器（USVString）。 Blob对象的默认文件名是“blob”。 File对象的默认文件名是文件的文件名。
那是你需要的，但这是不好的做法 。
假设您有30张图片需要编辑，那么您需要请求blob端点来获取这些图片blob。 但用户只想更新1张图片，浪费时间请求图片blob，对吗？
对于编辑图像，我们通常不需要附加到文件格式（ <input type="file" /> ）。
只需将其显示为缩略图即可查看上传的图像并让文件形式为空。
我们通常做什么，缩略图。
当用户更改时，用户将新图像替换为新图像并更新旧数据库。
如果没有，对图像不做任何事情。 （YAGNI）
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);
}
但让我们说一个用户编辑一些数据并上传一些图片或删除一些图片。 在这种情况下，我从数据库中获取图像，并再次尝试使用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);
}
...
}