Spring + Angular JS 用于文件上传与其他表单字段值

Question

我是 Angular JS 的新手。我正在使用单个请求中的其他字段值进行文件上传。我试过不上传文件。我在服务器中收到请求并坚持。我的服务器端 DTO 对象类是 TopicDTO。我添加了文件 html 元素然后尝试，我无法在服务器中接收请求。我更改了请求标头和方法签名，但它不起作用。

我的需要是，在服务器中上传带有其他字段值的文件。我的请求应该映射到 TopicDTO。我在哪里更改了我的代码。

Spring + Angular JS

JS

app.controller('topicAddCtrl', function($scope,$http) {
    $scope.topicname = "Success";
    $scope.topicdesc = "Desc";
    $scope.topicdate = "";
    $scope.file = null;
    $scope.prereq = "HTML,JS";
    $scope.seats = 10;
    $scope.pid = 1;
    $scope.pname = "Author";
    $scope.pemail = "Author@gmail.com";


    $scope.setDeck = function(fileInput) {

        $scope.file=fileInput.value;
        console.log(" File configured............"+$scope.file);
    };
    $scope.register=function (){

        var dataObj = {
                topicName : $scope.topicname,
                topicDesc : $scope.topicdesc,
                topicDate : $scope.topicdate,
                file : $scope.file,
                prereq: $scope.prereq,
                seats : $scope.seats,
                presenterId: $scope.pid,
                presenterName : $scope.pname,
                presenterEmail : $scope.pemail


        };

        $http({
            method: 'POST',
            url: 'http://localhost:8080/workshop/topic_add.do',
            headers: {'Content-Type': 'multipart/form-data'},
            data: dataObj,
            transformRequest: function(data, headersGetterFunction) {
                return data; // do nothing! FormData is very good!
            }
        }).success(function(data, status) {
        }).error(function(data, status) {
        });
    }

HTML

<div id="topic_container" ng-app="topicAddApp"
        ng-controller="topicAddCtrl" align="center">
        <form  class="form-horizontal" enctype="multipart/form-data" ng-submit="register()">
        <table align="center" border="1" cellpadding="1" cellspacing="1"
            style="width: 500px;" class="table">
            <tbody>
                <tr>
                    <td align="center">Topic Name</td>
                    <td><input name="topicname" ng-model="topicname" type="text" class="form-control" /></td>
                </tr>
                <tr>
                    <td align="center">Topic Description</td>
                    <td><textarea cols="15" name="topicdesc" ng-model="topicdesc" class="form-control"
                            rows="2" ></textarea></td>
                </tr>
                <tr>
                    <td align="center">Topic Date</td>
                    <td><input name="topicdate" ng-model="topicdate" type="text" id="topicdate" class="form-control" datepicker/></td>
                </tr>
                <tr>
                    <td align="center">Topic Deck</td>
                    <td><input name="topicdeck" ng-model="file" type="file" class="form-control"  onchange="angular.element(this).scope().setDeck(this)"/></td>
                </tr>
                <tr>
                    <td align="center">Pre Requesites</td>
                    <td><textarea cols="19" name="prereq" ng-model="prereq" class="form-control"
                            rows="3" ></textarea></td>
                </tr>
                <tr>
                    <td align="center">Seats</td>
                    <td><input name="seats" ng-model="seats" type="number" class="form-control"/></td>
                </tr>
                <tr>
                    <td align="center">Presenter Id</td>
                    <td><input name="pid" ng-model="pid" type="number" class="form-control"/></td>
                </tr>
                <tr>
                    <td align="center">Presenter Name</td>
                    <td><input name="pname" ng-model="pname" type="text" class="form-control" /></td>
                </tr>
                <tr>
                    <td align="center">Presenter Email Address</td>
                    <td><input name="pemail" ng-model="pemail" type="email" class="form-control"/></td>
                </tr>
                <tr>
                    <td align="center"><input name="register" type="submit"
                        value="Register"  class="btn btn-primary"/></td>
                    <td align="center"><input name="clear" type="button"
                        value="Clear" ng-click="clear()" class="btn btn-primary"/></td>
                </tr>
            </tbody>
        </table>
        </form>
    </div>

服务器代码

@RequestMapping(value = "topic_add.do",headers = "'Content-Type': 'multipart/form-data'",method = RequestMethod.POST)
public void addTopic(@RequestParam("file") MultipartFile file, HttpServletResponse response) {
            System.out.println(" I got the Request "+file);
}

DTO 类

public class TopicDTO extends BaseDTO{

    private String topicName;
    private String topicDesc;
    private String topicDate;
    private String file;

    private String prereq;
    private int presenterId;
    private String presenterName;
    private String presenterEmail;
    private int seats;

    public String getTopicName() {
        return topicName;
    }
    public void setTopicName(String topicName) {
        this.topicName = topicName;
    }
    public String getTopicDesc() {
        return topicDesc;
    }
    public void setTopicDesc(String topicDesc) {
        this.topicDesc = topicDesc;
    }
    public String getTopicDate() {
        return topicDate;
    }
    public void setTopicDate(String topicDate) {
        this.topicDate = topicDate;
    }

    public String getPrereq() {
        return prereq;
    }
    public void setPrereq(String prereq) {
        this.prereq = prereq;
    }
    public int getPresenterId() {
        return presenterId;
    }
    public void setPresenterId(int presenterId) {
        this.presenterId = presenterId;
    }
    public String getPresenterName() {
        return presenterName;
    }
    public void setPresenterName(String presenterName) {
        this.presenterName = presenterName;
    }
    public String getPresenterEmail() {
        return presenterEmail;
    }
    public void setPresenterEmail(String presenterEmail) {
        this.presenterEmail = presenterEmail;
    }
    public int getSeats() {
        return seats;
    }
    public void setSeats(int seats) {
        this.seats = seats;
    }
    public String getFile() {
        return file;
    }
    public void setFile(String file) {
        this.file = file;
    }
    @Override
    public String toString() {
        return "TopicDTO [topicName=" + topicName + ", topicDesc=" + topicDesc
                + ", topicDate=" + topicDate + ", topicDeck=" + topicDeck
                + ", prereq=" + prereq + ", presenterId=" + presenterId
                + ", presenterName=" + presenterName + ", presenterEmail="
                + presenterEmail + ", seats=" + seats + "]";
    }


}

无文件上传的服务器代码

@RequestMapping(value = "topic_add.do",method = RequestMethod.POST)
    public void addTopic(@RequestBody TopicDTO topicDTO, HttpServletResponse response) {
                System.out.println(" I got the Request ");
    }

它在没有文件上传的情况下工作。它不适用于文件上传。

我必须对服务器端和客户端进行哪些更改才能使其正常工作？

Answer 1

您的文件字段名称错误。改变这个：

public void addTopic(@RequestParam("file") MultipartFile file, HttpServletResponse response) 

到：

public void addTopic(@RequestParam("topicdeck") MultipartFile file, HttpServletResponse response)