我无法使用multer查看角度响应

I cannot view response in angular using multer

本文关键字：响应 multer      更新时间：2023-09-26

我正在使用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);
});

角度上传

$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>

我认为你不应该从服务器返回文件，实际上你可以通过$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);
}
相关文章：