文件和表单数据的角度和弹簧错误400错误请求

我得到415错误,当我尝试删除时,我开始得到400错误。 请帮帮我。

html代码 -

<form ng-submit="save()" enctype="multipart/form-data">
    <div >  
       username <input type="text" ng-model="username">
       age <input type=" text" ng-model="age">
       <input type="file"  name ="newImage" ng-model="newImage" upload-files/>  

       <img file-preview="newImage" />
       <li ng-repeat="file in files">{{file.name}}</li>  

       <br />  
       <input type="submit" value="Save">  
   </div>
</form>

controller.java-

@RequestMapping(
    value = "uploadFile.htm",
    method = RequestMethod.POST)
@ResponseBody
public Object saveUserDataAndFile(
                  @RequestParam("model") User user,
                  @RequestParam("newImage") MultipartFile file) {
    System.out.println("Inside File upload" +user+getUsername());   
}

script.js -

 $scope.save = function () {  
 window.alert("json ::"+$scope.username +"   "+$scope.age);

 $scope.jsonData = {  
           username:$scope.username,  
           age: $scope.age 
 };  

 var file = $scope.files;  //contain 1 image file
 var json = $scope.jsonData;

 $http({
    method: 'POST',
    url: 'fileDataController/uploadFile.htm',
    headers: {
        'Content-Type': undefined
    },
    data: {
       model: $scope.jsonData,
       newImage: $scope.files
    },
    transformRequest: function (data, headersGetter) {
        var formData = new FormData();
        angular.forEach(data, function (value, key) {
            window.alert(key+":"+value);
            if(typeof data[key] == 'object' && !(data[key] instanceof File)){
                 formData.append(key, JSON.stringify(data[key]));
                }else{
                formData.append(key, data[key]);

                }
        });

        var headers = headersGetter();
        delete headers['Content-Type'];

        return formData;
    }
}).
    success(function (data, status, headers, config) {  
        alert("success!"+status +data);  
    }).  
    error(function (data, status, headers, config) {  
        alert("failed!"+status +data);  
    });  
};  

User.java -

@Entity 
@Table(name="user") 
public class User  {
    @Id     
    @GeneratedValue
    private Integer id;

    @Column     
    private String username;

    @Column
    private int age;

    @Column
    private Blob imgprofile;

    //setter and getters
}

我的上传文件指令 -

app.directive('uploadFiles', function () {  
return {  
    restrict: 'A',
    require: '?ngModel',
    link: function ($scope, element, attrs, ngModel) {
       if (!ngModel) {
            return;
        }
        ngModel.$render = angular.noop;

        element.bind('change', function (event) {

        var files = event.target.files;
        $scope.files.push(files);                        //storing file in files array 
        window.alert($scope.files.pop());   //showing   object FileList 
         window.alert("change event size of file :::"+event.target.files[0].size);
            ngModel.$setViewValue(event.target.files[0]);

            $scope.$apply();
        });
    }  
};  

})

错误 -

HTTP状态400 - 所需的MultipartFile参数'newImage'不存在

键入状态报告

消息必需的MultipartFile参数'newImage'不存在

说明客户端发送的请求在语法上不正确。

Apache Tomcat / 7.0.67


我想你应该尝试下面的内容。 请让我知道您的反馈。 谢谢!

        $http({
            method: 'POST',
            url: "fileDataController/uploadFile.htm",
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            data: {
                model: $scope.jsonData,
                newImage: $scope.files[0]
            },
            transformRequest: function (data, headersGetter) {
                var formData = new FormData();
                angular.forEach(data, function (value, key) {
                     formData.append(key, value);
                });
                var headers = headersGetter();
                delete headers['Content-Type'];
                return formData;
            }
        }).success(function (response) {
            //... more code...
        }
链接地址: http://www.djcxy.com/p/48735.html

上一篇: 400 error bad request in angular and spring for file and form data

下一篇: Intellij IDEA REST Client file uploading