如何使用使用angular 2发布的nodejs保存包含图像的表单数据

Question

我正在使用mean stack创建一个应用程序，其中客户端使用angular 2。我创建了一个包含一些输入字段和图像的表单。现在，为了提交表单，我使用formdata将数据发送到节点服务器。现在我无法在节点服务器上显示、访问和保存数据。请有人帮帮我，因为我是个吝啬鬼。

数据阵列：

const newProduct = {
category: this.pcategory,
name: this.name,
description: this.description,
price: this.price,
quantity: this.quantity,
image: this.fileName
} 

这是发送数据的代码：图像数据包含文件的数据

addProduct(newProduct, imagedata:File) {
let formData: FormData = new FormData();
formData.append('body', JSON.stringify(newProduct));
formData.append('file', image, newProduct.imagedata);
let headers = new Headers();
headers.append("enctype", "multipart/form-data"); 
headers.append("Accept", "application/json");
let options = new RequestOptions({ headers: headers });
return this.http.post('http://localhost:3000/product/add' ,formData, options).map((response: Response) => response.json());
}

这是接收和保存数据的代码：

function (req, res) {
var storage = multer.diskStorage({//multers disk storage settings
destination: function (req, file, callback) {
callback(null, './uploads');
}
});
var upload = multer({//multer settings
storage: storage
}).any();
var model = new Model(req.body);
model.save(function (err) {
if (err) {
return res.status(400).send({
message: errorHandler.getErrorMessage(err)
});
} else {
res.status(201).json(model);
}
});
upload(req, res, function (err) {
if (err) {
// An error occurred when uploading
console.log(err);
return res.status(422).send("an Error occured")
}
});
}

Answer 1

在angular 2中，您无法用这种方法上传图像，请考虑使用angular 2模块ng2文件上传器。你可以在这里看到演示应用程序Angular File Uploads with a Express Backend.

Answer 2

一种解决方案可以是将图像转换为base64字符串，并在模型中传递该字符串。然后将base64字符串转换回服务器中的图像。