连接终止解析Angulrjs和JAX-RS中的多部分数据

Question

我希望使用AngularJS向我的本地主机（在spring boot server中）发送来自用户的选定图像，并使用JAX-RS在BD中添加数据对象。

<form role="form" enctype="multipart/form-data" name="myForm" ng-submit="uploadfile()">
<label class="control-label">Image:</label> 
<input type="file" class="form-control " file-model="Image" > 
<input type="text" class="form-control " ng-model="name" > 
 <input type="text" class="form-control " ng-model="lastname" > 
<button type="submit"> save</button>
</form>

var app = angular.module('Mainapp', ['ngRoute','file-model','ui.bootstrap']);
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);
       angular.forEach(file, function(file) {
            fd.append('file', file);
        });

        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).then(function(response) {
            console.log("done post "+response);
    }).catch(function(e) {
        console.log('failed to post: ', e);
        throw e;
    })

    }
}]);
//upload file and data object of user
$scope.uploadfile = function() {
        var file = $scope.Image;
         console.dir(file);
        var uploadUrl ="http://localhost:8000/auditconfig/images/"+file.name; 
        fileUpload.uploadFileToUrl(file, uploadUrl); // error here "failed to post"


var user = {
              name: $scope.name,
              lastname: $scope.lastname,
              image:file.name 
             };
$http.post(url+"/add", user) //The user is added to the database
.success(function(data) {
      $scope.ListUsers = data;
}).error(function(err, data) {
    console.log("error: " +data);
});
  };

//**console.dir(file);
*File:
lastModified:1490260924299
lastModifiedDate; Thu Mar 23 2017 10:22:04 GMT+0100 (Paris, Madrid)
name:"01.png"
size:1637
type:"image/png"
webkitRelativePath:""
__proto__:File

-上载文件的测试：

//**console.log('failed to post: ', e);
Failed to load resource: the server responded with a status of 500 (Internal Server Error) :8099/AuditConf/images/01.png
failed to post: Object
Config:Objectd
ata:FormData
__proto__:FormData 
headers:Object
Accept:"application/json, text/plain, */*"
Content-Type:undefined
__proto__:Object
method:"POST"
transformRequest:function identity($)
transformResponse:Array(1)
url:"http://localhost:8099/AuditConf/images/Exception--JAX-RS.png"
__proto__:Object
data:Object
error:"Internal Server Error"
exception:"java.lang.RuntimeException"
message:"java.io.IOException: UT000036: Connection terminated parsing multipart data"
path:"/auditconfig/images/Exception--JAX-RS.png"
status:500
timestamp:1490778930961
__proto__:Object
headers:function (name)
status:500 statusText
:"Internal Server Error"
__proto__;Object

Answer 1

试试看：

this.uploadFileToUrl = function(file, uploadUrl){
    var data = new FormData();
    data.append('file', file);

    //Comment below
    //angular.forEach(file, function(file) {
    //  fd.append('file', file);
    //});

    return $http.post(uploadUrl, data, {
        transformRequest: angular.identity,
        headers: { 'Content-Type': undefined }
      }).then(function (results) {
        return results;
    });
}

请参阅这里的答案，它在一个对象“file”中接受多个文件。