Question

使用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()时，我得到一个空对象。我的装订有问题。

建议？

尝试使用Angular和Nodejs上传图片

0 个答案: