使用multipart的jQuery文件上传在后端中给出null值

时间:2015-04-10 07:24:58

标签: angularjs spring-mvc jquery-file-upload

我使用jQuery File Upload library将多个pdf文件上传到Spring MVC backend with multipart。我面临的问题是:在我点击上传按钮的调试模式下,它会引导我requestmappermultipartFile对象为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为止。如果您可以告诉我如何中断已经拨打的电话,我可以看到故障所在。

0 个答案:

没有答案