使用angularjs和Spring MVC上传带有文件附件的javascript表单

Question

我试图发布带有附件的表单数据，前端是angularjs，后端是Spring，所有工作都没有文件上传部分，但在添加文件上传部分时，我不断收到以下错误：

HTTP Status 400 - Required EmailModel parameter 'email' is not present

以下是代码：

HTML

...
<input type="file" file-upload multiple/>
...

指令。js

emailApp.directive('fileUpload', function () {
    return {
        scope: true,        //create a new scope
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var files = event.target.files;
                //iterate files since 'multiple' may be specified on the element
                for (var i = 0;i<files.length;i++) {
                    //emit event upward
                    scope.$emit("fileSelected", { file: files[i] });
                }                                       
            });
        }
    };
});

服务。js

emailApp.service('emailService', ['$http', '$q', function($http, $q){

    this.sendEmployeeEmail = function(composedEmail, files) {
        var deferred = $q.defer();

        var req = {
                method: 'POST',
                url: "/send-email-service",
                //IMPORTANT!!! You might think this should be set to 'multipart/form-data' 
                // but this is not true because when we are sending up files the request 
                // needs to include a 'boundary' parameter which identifies the boundary 
                // name between parts in this multi-part request and setting the Content-type 
                // manually will not set this boundary parameter. For whatever reason, 
                // setting the Content-type to 'false' will force the request to automatically
                // populate the headers properly including the boundary parameter.
                headers: { 'Content-Type': false },
                //This method will allow us to change how the data is sent up to the server
                // for which we'll need to encapsulate the model data in 'FormData'
                transformRequest: function (data) {
                    var formData = new FormData();
                    //need to convert our json object to a string version of json otherwise
                    // the browser will do a 'toString()' on the object which will result 
                    // in the value '[Object object]' on the server.
                    formData.append("email", angular.toJson(data.model));
                    //now add all of the assigned files
                    for (var i = 0; i < data.files; i++) {
                        //add each file to the form data and iteratively name them
                        formData.append("file" + i, data.files[i]);
                    }
                    return formData;
                },
                //Create an object that contains the model and files which will be transformed
                // in the above transformRequest method
                data: { email: composedEmail, files: files }
        };

        $http(req).success(function(response) {
            deferred.resolve(response);
        }).error(function(error){
            deferred.reject(error);
        });

        return deferred.promise;
    };
}]);

EmailServiceController。爪哇

    @RequestMapping(value = "/send-email-service", method = RequestMethod.POST)
    public void sendEmployeeEmail(HttpSession session, HttpServletResponse response, @RequestParam("email") EmailModel model, @RequestParam("files") List<MultipartFile> file) throws Exception
    {
        ...
    }

电子邮件模型。爪哇

public class EmailModel {
    private String uid;
    private String account;
    private String from;
    private String recipients;
    private String cc;
    private String bcc;
    private String subject;
    private String dateSent;
    private String content;
    private Boolean read;
    private List<AttachmentPreview> attachmentsPreview;

    public String getFrom() {
        return from;
    }
    public void setFrom(String from) {
        this.from = from;
    }
    public String getRecipients() {
        return recipients;
    }
    public void setRecipients(String recipients) {
        this.recipients = recipients;
    }
    public String getSubject() {
        return subject;
    }
    public void setSubject(String subject) {
        this.subject = subject;
    }
    public String getDateSent() {
        return dateSent;
    }
    public void setDateSent(String string) {
        this.dateSent = string;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
    public String getCc() {
        return cc;
    }
    public void setCc(String cc) {
        this.cc = cc;
    }
    public String getUid() {
        return uid;
    }
    public void setUid(String uid) {
        this.uid = uid;
    }
    public String getBcc() {
        return bcc;
    }
    public void setBcc(String bcc) {
        this.bcc = bcc;
    }
    public Boolean getRead() {
        return read;
    }
    public void setRead(Boolean read) {
        this.read = read;
    }
    public String getAccount() {
        return account;
    }
    public void setAccount(String account) {
        this.account = account;
    }
    public List<AttachmentPreview> getAttachmentsPreview() {
        return attachmentsPreview;
    }
    public void setAttachmentsPreview(List<AttachmentPreview> attachmentsPreview) {
        this.attachmentsPreview = attachmentsPreview;
    }
}