如何将数据对象和文件图像从 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

首先要做的是。Angular 的 ng-model 不适用于 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 服务在我们的范围内设置值来实现的。视图中指令工作所需的标记很简单

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

当您向服务器发送图像时，需要以multipart/form-data 格式发送。由于您需要发送带有图像的 json，因此您需要附加 json 对象 formData 并发送它。它也应该是发布请求。无法使用 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);
        });
}

同样将node方法改为post

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