尝试使用Angular和Nodejs上传图片

使用Angular / Node设置上传图像最简单/最好的方法是什么? 我目前正在尝试Multer,但我有问题得到它正常工作。

的NodeJS:

import multer from 'multer'; const upload = multer({ dest: './uploads/'}); app.post('/api/entries', upload.single('file'), entryCtrl.addEntry); 

这是我在Angular中的一些代码:

 this.addEntry = (uploadUrl, data) => { console.log('data', data); const fd = new FormData(); for (var key in data) { fd.append(key, data[key]); } console.log('fd', fd); $http.post(uploadUrl, fd, { transformRequest: angular.identity, headers: { 'Content-Type': undefined } }); } 

我的console.log data是正确的,但是当我使用FormData()和循环, fd是一个空的对象。

CTRL:

 $scope.addEntry = () => { const uploadUrl = '/api/entries'; return MainService.addEntry(uploadUrl, $scope.entry); } 

HTML:

 <form enctype="multipart/form-data"> <fieldset> <input type="file" name="file" file-model="entry.file"> <input type="text" ng-model="entry.length"> <button type="submit" ng-click="addEntry()">Submit</button> </fieldset> </form> <pre> {{ entry }} </pre> 

这是我正在使用的指令:

 directive("fileModel", function($parse) { return { restrict: 'A', link: (scope, element, attrs) => { const model = $parse(attrs.fileModel); const modelSetter = model.assign; element.bind('change', () => { scope.$apply(() => { modelSetter(scope, element[0].files[0]); }); }); } } }); 

日志:

 data Object {file: File, length: "12.52"} file: FilelastModified: 1464152993000 lastModifiedDate: Wed May 25 2016 00:09:53 GMT-0500 (CDT) name: "IMG_0022.JPG" size: 569111type: "image/jpeg" webkitRelativePath: "" __proto__: Filelength: "12.52"__proto__: Object fd FormData {} 

这是我的问题所在。 我得到data.file下的文件,但试图将其附加到FormData() ,我得到一个空的对象。 我的约束有些不妥。

build议?