我是Angular JS的新手。我在单个请求中使用其他字段值进行文件上传。我试过没有文件上传。我收到服务器请求并坚持。我的服务器端DTO Object类是TopicDTO。我已经添加了文件html元素然后尝试过，我无法在服务器中收到请求。我已经更改了请求标头和方法signatue它无法正常工作。
我的需求是，在服务器中上传带有其他字段值的文件。我的请求应该使用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 ");
}
没有fileupload正在工作。它不适用于文件上传。
我必须对服务器端和客户端进行哪些更改才能使其正常工作？
答案 0 :(得分：0)
您的文件字段名称错误。改变这个：
public void addTopic(@RequestParam("file") MultipartFile file, HttpServletResponse response)
TO：
public void addTopic(@RequestParam("topicdeck") MultipartFile file, HttpServletResponse response)