如何將數據對象和文件圖像從angularJs發送到nodeJS

Question

我正在尋找如何檢索從angularJS發送到nodeJS的表單（文本字段和圖像）的信息。

-html代碼：

<form role="form" enctype="multipart/form-data" name="myForm"> 
<input type="text" ng-model="UserName" required="required"> 
<input type="text" ng-model="FirstName" required="required"> 
<input type="file" ng-model="Image" required="required"> 
<button type="submit" ng-click="addUser()">save</button> 
</form> 

• Angular.js文件：

$scope.addUser=function(){ 
     var user ={ 
      UserName: $scope.UserName, 
      FirstName:$scope.FirstName 
        }; 
       console.log("info User: "+user.UserName);//Well recovered data 

       $http.get(url+"/add",$scope.user,$scope.Image) 
       .success(function(data){ 
         $scope.ListUsers=data; 
       }).error(function(err,data){ 
        console.log("error " +err); 
       }); 
      }; 

• Node.js的文件：

app.get("/add",function (req,res) { console.log("data of user: "+req.body); //undefined 
http.get(url+"/AddRest",req.body,req.Image, function (repsHttp) { 
//error here 
         var body=''; 
          repsHttp.on('data',function(d) { 
           body += d; 
          }); 
          repsHttp.on('end',function() { 
           try { 
            var user = JSON.parse(body); 
           } catch(e) { 
            console.log('error ', +body); 
           } 
           res.json(user); 
          }); 
         }); 
        }); 

-API JAX-RS的另外一個用戶的：

@RequestMapping(value="/add",headers = "content-type=multipart/*") 
    @Consumes("multipart/form-data") 
    public Users AddUser(@FormDataParam("file") InputStream uploadedInputStream, 
      @RequestParam(value="file") MultipartFile fileDetail, 
      HttpServletRequest request, 
      @RequestBody(required=false) Users user){ 

      UM.AddDataUsers(uploadedInputStream,fileDetail,user); 
         } 

謝謝你對我的幫助，

Answer 1

第一件事first.Angular的NG-模型沒有用type=「file」處理輸入，所以我們需要創建我們自己的指令來將文件綁定到視圖控制器中的變量。

.directive('fileModel', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 

      element.bind('change', function(){ 
       scope.$apply(function(){ 
        modelSetter(scope, element[0].files[0]); 
       }); 
      }); 
     } 
    }; 
}]); 

相應的變量。這是通過使用$ parse服務在我們的作用域中設置值來實現的。當你發送圖像到服務器需要將其作爲發送格式multipart/form-data在指令工作視圖所需要的標記很簡單

<input type="file" file-model="Image" required>

。既然你需要發送一個圖像的json，你需要附加json對象formData併發送它。它也應該是post請求。使用get不能發送數據請求

$scope.addUser = function() { 
    $scope.user = { 
     UserName: $scope.UserName, 
     FirstName: $scope.FirstName 
    }; 
    var fd = new FormData(); 
    angular.forEach($scope.Image, function(file) { 
     fd.append('file', file); 
    }); 
    fd.append('user', JSON.stringify($scope.user)); 
    $http.post(url + "/add", fd, { 
      transformRequest: angular.identity, 
      headers: { 
       'Content-type': undefined 
      } 
     }) 
     .success(function(data) { 
      $scope.ListUsers = data; 
     }).error(function(err, data) { 
      console.log("error " + err); 
     }); 
} 

也改變了節點的方法張貼

app.post("/add", function(req, res) { 
    console.log("data of user: " + req.body); 
})