我无法使用 multer 查看 angular 中的响应

I cannot view response in angular using multer

我正在使用 Multer 上传照片。我的后端是 Node,我能够成功上传图像。当我上传图片时,它会通过 json 发送回 Angular。我成功获得了响应,但在控制台日志中我看到的只是 [object Object] 并且我无法在视图中看到响应。我尝试 stringify 但没有运气。收到回复总是让我失望,我很想最终理解这一点。在我的 HTML 中什么也没有出现。

来自Node.js

的回应
apiRoutes.post('/admin/photos',upload.single('file'),function(req,res){
  console.log(req.file);
  res.json(req.file);
});

Angular上传

$scope.submit = function() {
  if ($scope.file) {
    $scope.upload($scope.file);
  }
};

// upload on file select or drop
$scope.upload = function (file) {
  Upload.upload({
    url: '/api/admin/photos',
    headers : {
    'Content-Type': 'multipart/form-data'
    },
    data: {file: file}
  }).then(function (resp) {
       console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
       $scope.myPic = resp.config.data.file.name;       
  }, function (resp) {
         console.log('Error status: ' + resp.status);
  }, function (evt) {
         var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
         console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
  });
 };
}]);

HTML

<form  ng-controller="adminController" name="form" enctype="multipart/form-data">
  Single Image with validations
  <div class="button btn btn-default" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
    ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" 
    >Select</div>
  <button type="submit" ng-click="submit()">submit</button>
</form>

<p>{{ myPic }} </p>

<ul ng-repeat="picture in myPic">
    <li>{{ picture }} </li>
</ul>

我认为您不应该 return 来自服务器的文件,实际上您可以通过 $scope.file:

在客户端检测文件详细信息

http://jsfiddle.net/6jh0sb5n/3/

<input type="file" ngf-select ng-model="file" name="file"    
         accept="image/*" ngf-max-size="2MB" required
         ngf-model-invalid="errorFiles" ng-change="getFileDetail()">

.then(function (resp) {
    alert('filename:' + $scope.file.name + ',size: ' + $scope.file.size);
}