Javascript 如何通过AngularJs将用户ID和文件（多部分）一起传递给REST控制器？

我有一个使用AngularJs的多部分文件上传实现，它将文件发送到rest控制器以存储文件

HTML

<form name="myForm" id="loginForm" data-ng-submit="submitForm()">
  <input type="text" name="user_fullname" ng-model="fullName">
  <input type="text" name="Contactnumber" ng-model="number"/>
  <input type="file" data-ng-file-select data-ng-model="item.file" id="document" data-uploader="uploader" data-file-model="myFile" accept="application/pdf" class="form-control ng-pristine ng-valid"/>
  <button class="btn btn-sm btn-warning"  data-ng-click="addItem(item.file)" type="button"> Upload </button> <br>
  <button id="submit" class="btn btn-success">Register</button>
</form>

上传

登记

JS

    app.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]);
                    });
                });
            }
        };
    }]);

    app.service('fileUpload', ['$http', function ($http) {
        this.uploadFileToUrl = function(file, uploadUrl){
            var fd = new FormData();
            fd.append('file', file);
            $http.post(uploadUrl, fd, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined}

            })
            .success(function(data){

                $scope.res=data;
            })
            .error(function(){
            });
        }
    }]);

    app.controller('detailsController',[ '$scope', '$http', 'fileUpload', function($scope, $http,  fileUpload)
          {
               $scope.items = [];
               $scope.item = {};

               $scope.addItem = function (item)                             
                {   
                    if ($scope.item.file != undefined)
                    {
                        $scope.items.push( $scope.item);
                        $scope.item = {};
                        $scope.showTable=true;
                    }
                    else {
                            $('#myModalErr2').modal('show');
                         }
                }
         $scope.submit = function()
                 { 
                            var formData =
                        {
                            fullName     : $scope.fullName,
                            contactNumber: $scope.number,
                        };


                        $http.post('userdetails', formData ).success(function(response)
                            {

                                if ($scope.items.length > 0)
                                  {
                                    for (var i = 0 ; i < $scope.items.length ; i++)
                                    {
                                      $scope.uploadFile($scope.items[i]);

                                    }
                                  }  

            };

        $scope.uploadFile = function(file){
           var file = $scope.myFile;
           var uploadUrl = 'upload';
           fileUpload.uploadFileToUrl(file, uploadUrl);
        };

app.directive（'fileModel'，['$parse'，function（$parse）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
var model=$parse（attrs.fileModel）；
var modelSetter=model.assign；
元素绑定（'change'，function（））{
作用域$apply（函数（）{
modelSetter（作用域，元素[0]。文件[0]）；
});
});
}
};
}]);
app.service（'fileUpload'，['$http'，function（$http）{
this.uploadFileToUrl=函数（文件，uploadUrl）{
var fd=新FormData（）；
fd.append（'file'，file）；
$http.post（上传URL、fd、{
请求：angular.identity，
标题：{'Content-Type'：未定义}
})
.成功（功能（数据）{
$scope.res=数据；
})
.错误（函数（）{
});
}
}]);
app.controller（'detailsController'，['$scope'，'$http'，'fileUpload'，函数（$scope，$http，fileUpload）
{
$scope.items=[]；
$scope.item={}；
$scope.addItem=函数（项）
{   
如果（$scope.item.file！=未定义）
{
$scope.items.push（$scope.item）；
$scope.item={}；
$scope.showTable=true；
}
否则{
$（'#myModalErr2'）.modal（'show'）；
}
}
$scope.submit=函数（）
{ 
var formData=
{
全名：$scope.fullName，
联系人编号：$scope.number，
};
$http.post（'userdetails'，formData）.success（函数（响应）
{
如果（$scope.items.length>0）
{
对于（变量i=0；i<$scope.items.length；i++）
{
$scope.uploadFile（$scope.items[i]）；
}
}  
};
$scope.uploadFile=函数（文件）{
var file=$scope.myFile；
var uploadUrl='upload'；
uploadFileToUrl（文件，uploadUrl）；
};

REST控制器（用于文件上传）

@RequestMapping（value=“/upload”，method=RequestMethod.POST，consumes={“multipart/formdata”}）
public@ResponseBody void handleFileUpload（MultipartTTPServletRequest请求，HttpServletResponse响应）{
迭代器itr=request.getFileNames（）；
MultipartFile mpf=null；
while（itr.hasNext（））{
System.out.println（“内部循环”）；
mpf=request.getFile（itr.next（））；
如果（files.size（）>=10）
pop（）文件；
fileMeta=新文档（）；
fileMeta.setFileName（mpf.getOriginalFilename（））；
试一试{
fileMeta.setBytes（mpf.getBytes（））；
FileCopyUtils.copy（mpf.getBytes（），新文件输出流（“D:/temp/files/”+mpf.getOriginalFilename（））；
}捕获（IOE异常）{
e、 printStackTrace（）；
}
添加（fileMeta）；
}
}

---

在angular controller中，首先我将姓名和联系电话张贴到REST，如果成功，自动生成的id将返回给我获得的angular。问题是，如何将此id与多部分文件一起发送以存储具有特定id的文件？

使用

type=hidden

输入元素或使用另一个

transformRequest

并将其设置在那里。@PatrickJ.S.，您能在代码中解释一下吗？我是这个多端口的新手，在您的fileUpload服务中是

fd.append（'user-id'，userId）

或者

transformRequest:function（fd）{fd.append（'user-id'，userId）；return fd}

在你的

$resource

中。或者你的

中。如果你想将其作为某种形式的身份验证，你可能需要谷歌

HTTP身份验证方法，有很多解决方案，不需要发明新的。我编写了fd.append（'file'，file）；fd.append（'id'，id）；在服务中。当我通过放置断点进行检查时，id显示为对象，而不是整数值。可能是什么问题？@protation关于您的“id对象不是整数值”，您将传递什么作为id参数？
@RequestMapping(value="/upload", method=RequestMethod.POST, consumes={"multipart/form-data"})
    public @ResponseBody void handleFileUpload(MultipartHttpServletRequest request, HttpServletResponse response) {

        Iterator<String> itr =  request.getFileNames();
        MultipartFile mpf = null;

        while(itr.hasNext()){

            System.out.println("Inside loop");
            mpf = request.getFile(itr.next()); 

            if(files.size() >= 10)
                files.pop();

            fileMeta = new Document();
            fileMeta.setFileName(mpf.getOriginalFilename());

            try {
                fileMeta.setBytes(mpf.getBytes());
                FileCopyUtils.copy(mpf.getBytes(), new FileOutputStream("D:/temp/files/"+mpf.getOriginalFilename()));

            } catch (IOException e) {

                e.printStackTrace();
            }
            files.add(fileMeta);
        }
    }