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

我正在创build一个应用程序使用平均堆栈,其中我使用angular2为客户端。 我创build了一个包含一些input字段和图像的表单。 现在,提交表单我使用formdata发送数据到节点服务器。 现在我无法显示,访问和保存节点服务器上的数据。 请有人帮我,因为我是新的意思是堆栈。

数据数组:

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

这里是发送数据的代码:imagedata包含文件的数据

 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") } }); } 

在angular度2,你不能上传图像与这种方法考虑使用这个Angular 2模块ng2file upload 。 您可以在这里看到演示应用程序angular速度file upload与Express后端 。

一种解决scheme可能是将图像转换为base64string,并在模型中传递该string。 然后将该base64string转换回服务器中的映像。