从客户端发送图像到Node.js服务器（AngularJS）

我有一个非常快速的问题：

我有一个img标签（在我的模板文件中），它包含一个图像，在我的Angular Controller中调用：

var image = document.getElementById('srcImage'); 

我想把这个图像^发送到后端（我正在使用REST）。 我将用于这个POST方法的url是：'/ api / v1 / images / addImage'

我试过ngfile upload和$ http.post，但似乎没有工作。 有什么办法可以简单地把这个图像发送到服务器，以便我可以将其存储在数据库或文件系统中？ 我愿意为此做出任何解决scheme。

谢谢！！

Answer 1

你可以使用下面的库，它们也有很好的文档

前端 – https://github.com/nervgh/angular-file-upload

对于后端 – https://github.com/expressjs/multer

示例代码片段 –

在HTML中：

 <input type="file" nv-file-select="" uploader="ctrl.uploader" multiple /> 

angular度控制器：

 vm.uploader = new FileUploader({ url: 'http://' + SERVER_URL + '/upload', formData: [{ id: 1 }] }); vm.save = function() { vm.uploader.onBeforeUploadItem = function (item) { console.log(item); /* some action */ }; vm.uploader.onSuccessItem = function (item, imgResponse, status, headers) { console.log(item); console.log(imgResponse); console.log(status); console.log(headers); /* some action */ }; }; 

节点服务器：

 var fs = require('fs'); var multer = require('multer'); var fileName = ''; var storage = multer.diskStorage({ destination: function (req, file, cb) { var dirPath = 'path/to/save/file' if (!fs.existsSync(dirPath)) { var dir = fs.mkdirSync(dirPath); } cb(null, dirPath + '/'); }, filename: function (req, file, cb) { var ext = file.originalname.substring(file.originalname.lastIndexOf(".")); fileName = Date.now() + ext; cb(null, fileName); } }); // Assuming Express - app.get('/upload', function (req, res) { var upload = multer({ storage: storage }).array('file', 12); upload(req, res, function (err) { if (err) { // An error occurred when uploading res.json(err); } res.json(fileName); }); }); 

Answer 2

你可以尝试像这样的multipart/form-data ：

 <form id = "uploadForm" enctype = "multipart/form-data" action = "/api/photo" method = "post" > <input type="file" name="userPhoto" /> <input type="submit" value="Upload Image" name="submit"> </form>