Java 使用angularjs和Spring mvc上传数据和多个文件
我有一个结构如下的html表单:Java 使用angularjs和Spring mvc上传数据和多个文件,java,angularjs,spring,angularjs-fileupload,Java,Angularjs,Spring,Angularjs Fileupload,我有一个结构如下的html表单: <form class="form-horizontal" method="post" enctype="multipart/form-data"> <div class="form-group"> <div class="col-sm-10 top-element"> <select class="form-control" ng-model="category" id=
<form class="form-horizontal" method="post" enctype="multipart/form-data">
<div class="form-group">
<div class="col-sm-10 top-element">
<select class="form-control" ng-model="category" id="categorySelect" required>
<option selected value="1">Application & Services</option>
<option value="2">Benefits & Paper Work</option>
<option value="3">Hardware & Software</option>
<option value="4">People Management</option>
<option value="5">Security & Access</option>
<option value="6">Workplaces & Facilities</option>
</select>
</div>
<div class="col-sm-10 element">
<input type="text" ng-model="name" class="form-control" id="ticketName" required>
</div>
<div class="col-sm-10 element">
<textarea class="form-control" ng-model="description" id="ticketDescription" rows="3"></textarea>
</div>
<div class="col-sm-10 element">
<select class="form-control" ng-model="urgency" id="ticketUrgency" name="urgency">
<option selected value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
<option value="Critical">Critical</option>
</select>
</div>
<div class="col-sm-10 element">
<input class="form-control" id="date" name="date" ng-model="date" placeholder="MM/DD/YYYY" type="text"/>
</div>
<div class="col-sm-10 element">
<div class="form-inline">
<input type="file" class="form-control" id="file" name="file" file-model="file" multiple
accept=".pdf,.jpeg,.jpg,.doc,.docx,.png">
<input type="button" class="form-control" id="deleteFile"
onclick="document.getElementById('file').value = ''" value="Delete">
</div>
</div>
<div th:text="${error}"></div>
<div class="col-sm-10 element">
<textarea class="form-control" id="comment" ng-model="comment" rows="3"></textarea>
</div>
</div>
<div class="form-inline" style="float: right; margin-bottom: 60px; margin-right: 60px;">
<input type="submit" ng-click="saveDraft()" name="draft" class="btn btn-primary ticket-list-btn draft-btn"
value="Save as Draft">
</div>
</form>
和弹簧控制器:
var data = {
name: $scope.name,
description: $scope.description,
desiredResolutionDate: $scope.desiredResolutionDate,
state: $scope.ticketState,
categoryId: $scope.category,
urgency: $scope.urgency,
comment: $scope.comment
}
;
$http.post(url, data)
.then(
function (response) {
},
function (errResponse) {
console.log(errResponse);
}
)
@RequestMapping(value = "/new", method = RequestMethod.POST)
public void createTicket(@RequestBody TicketDto newTicketDto, Authentication authentication) {
User user = userService.loadUserByUsername(authentication.getName());
newTicketDto.setOwnerId(user.getId());
Ticket ticket = TicketDto.transformToEntity(newTicketDto);
ticketService.save(ticket);
}
我试图添加到我的TicketDto对象字段MultipartFile[]文件代码>并像其他字段一样在post请求中发送文件,但它不起作用。如何执行此操作?角度零件代码
java部件
文件模型
谢谢,但它只适用于一个文件。如何处理多个文件上载?我试图使用@RequestParam MultipartFile[]files
,但当我上传文件时,数组的长度是0。这在使angularjs codevar file=$scope.file时太简单了代码>自身附加您的文件fd.append('file',file)
我认为您使用的是file model=file
指令,因为它将返回0索引将其更改为返回文件数组中的所有元素您可以发布您的文件模型指令吗?@Fairy我已经用文件模型更新了我的答案它将只对一个文件输入多个文件有效接受的答案对多个文件无效文件夹。
var file = $scope.file;
var fd = new FormData();
fd.append('dto', JSON.stringify($scope.ticketdto));
fd.append('file', file);
$http({
method : 'POST',
url : 'url',
headers : {
'Content-Type' : undefined
},
data : fd,
transformRequest : function(data, headersGetterFunction) {
return data;
}
}).then(function(response) {
......
}).catch(function(response) {
......
});
@RequestMapping(value = "/new", method = RequestMethod.POST)
public void createTicket(@RequestParam String dto,
@RequestParam(required = false) MultipartFile file , Authentication authentication) {
....
//convert string ticket to dto using jackson databind
.....
}
yourappname.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);
});
});
}
};
}]);