我使用jQuery File Upload library
将多个pdf文件上传到Spring MVC backend
with multipart。我面临的问题是:在我点击上传按钮的调试模式下,它会引导我requestmapper
,multipartFile
对象为null
。我做错了什么还是我监督过的事情?请告诉我。
以下是代码中最重要部分的一些片段:
Angularjs-文件:
var ctrl = angular.module('controllers');
ctrl.controller('fileUploadController', ['$scope', 'httpFactory', '$filter', '$window', function ($scope, httpFactory) {
var url = '/value';
$scope.options = {
url: url,
maxNumberOfFiles: 2
};
$scope.loadingFiles = true;
httpFactory.get(url)
.then(
function (response) {
$scope.loadingFiles = false;
$scope.queue = response.data.files || [];
},
function () {
$scope.loadingFiles = false;
}
);
}
]).controller('fileDestroyController', ['$scope', 'httpFactory', function ($scope, httpFactory) {
var file = $scope.file,
state;
if (file.url) {
file.$state = function () {
return state;
};
file.$destroy = function () {
state = 'pending';
return httpFactory({
url: file.deleteUrl,
method: file.deleteType
}).then(
function () {
state = 'resolved';
$scope.clear(file);
},
function () {
state = 'rejected';
}
);
};
} else if (!file.$cancel && !file._index) {
file.$cancel = function () {
$scope.clear(file);
};
}
}
]);
And this is the HTML-part:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...
<form id="fileupload" action="/value" method="POST"
ng-controller="fileUploadController"
enctype="multipart/form-data" file-upload="options"
ng-class="{'fileupload-processing': processing() || registrationCar.loadingFiles}">
<div class="fileupload-buttonbar">
<span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
<i class="glyphicon glyphicon-plus"></i><span>Voeg bestand toe</span>
<input type="file" name="files[]" multiple ng-disabled="disabled">
</span>
<button type="button" class="btn btn-primary start" ng-click="submit()">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="button" class="btn btn-warning cancel" ng-click="cancel()">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The table listing the files available for upload/download -->
<div class="files">
<table class="table table-striped files ng-cloak">
<tr ng-repeat="file in queue"
ng-class="{'processing': file.$processing()}">
<td ng-if="registrationCar.isPdf(file)">
<img class="thumbnail-pdf" src="resources/img/pdf.png">
</td>
<td ng-if="!registrationCar.isPdf(file)" ng-switch
data-on="!!file.thumbnailUrl">
<div class="preview" ng-switch-when="true">
<a ng-href="{{file.url}}" title="{{file.name}}"
download="{{file.name}}" data-gallery>
<img ng-src="{{file.thumbnailUrl}}" alt=""></a>
</div>
<div class="preview" ng-switch-default file-upload-preview="file"></div>
</td>
<td>
<p class="name" ng-switch data-on="!!file.url">
<span ng-switch-when="true" ng-switch data-on="!!file.thumbnailUrl">
<a ng-switch-when="true" ng-href="{{file.url}}"
title="{{file.name}}" download="{{file.name}}"
data-gallery>{{file.name}}</a>
<a ng-switch-default ng-href="{{file.url}}"
title="{{file.name}}"
download="{{file.name}}">{{file.name}}</a>
</span>
<span ng-switch-default>{{file.name}}</span>
</p>
<strong ng-show="file.error"
class="error text-danger">{{file.error}}</strong>
</td>
<td>
<p class="size">{{file.size | formatFileSize}}</p>
<div class="progress progress-striped active fade"
ng-class="{pending: 'in'}[file.$state()]"
file-upload-progress="file.$progress()">
<div class="progress-bar progress-bar-success"
ng-style="{width: num + '%'}"></div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary start"
ng-click="file.$submit()"
ng-hide="!file.$submit || registrationCar.options.autoUpload"
data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button type="button" class="btn btn-warning cancel"
ng-click="file.$cancel()" ng-hide="!file.$cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button ng-controller="fileDestroyController" type="button"
class="btn btn-danger destroy" ng-click="file.$destroy()"
ng-hide="!file.$destroy">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</td>
</tr>
</table>
</div>
</form>
最后,这是我在后端捕获请求的工作。
@RequestMapping(value = "/value", method = RequestMethod.POST, consumes = ContentType.MULTIPART)
public ResponseEntity<Void> registerPOSTInsuranceToCar(@PathVariable("id") String theId, @RequestBody MultipartFile multipartFile) {
return new ResponseEntity<>(HttpStatus.OK);
}
一切正常,直到调用registerPOSTInsuranceToCar
为止。如果您可以告诉我如何中断已经拨打的电话,我可以看到故障所在。