带有 AngularJS 和 Spring MVC 的 jQuery Fileupload (Blueimp)

Question

我是网络开发的新手，我目前正在尝试实现一个简单的文件上传以用于测试目的。

总而言之，我的目标只是用 Java 服务器端重现这个：http://blueimp.github.io/jQuery-File-Upload/angularjs.html。

使用 jQuery Fileupload 插件和 AngularJS 我想制作一个 UI 来在服务器上上传文件。 在服务器端，我使用 Java 和 Spring MVC 来处理 HTTP 请求。

但是，我目前无法使其正常工作，这肯定是因为我不知道在将 jQuery Fileupload 与 AngularJS 一起使用时应该处理哪种 HTTP 请求，而且 Blueimp 文档对我没有帮助（可能是我的错，当您使用这种框架时，它可能是众所周知的）。

这是我当前的 AngularJS 控制器文件（它基本上是 AngularJS 示例中给出的那个的副本）：

/* jshint nomen:false */
/* global window, angular */

(function () {
    'use strict';

    var url = '/ExerciseValidator/upload/';

    angular.module('file-upload', ['blueimp.fileupload'])
        .config([
            '$httpProvider', 'fileUploadProvider',
            function ($httpProvider, fileUploadProvider) {
                delete $httpProvider.defaults.headers.common['X-Requested-With'];
                fileUploadProvider.defaults.redirect = window.location.href.replace(
                    /\/[^\/]*$/,
                    '/cors/result.html?%s'
                );

                angular.extend(fileUploadProvider.defaults, {
                    // Enable image resizing, except for Android and Opera,
                    // which actually support image resizing, but fail to
                    // send Blob objects via XHR requests:
                    disableImageResize: /Android(?!.*Chrome)|Opera/
                        .test(window.navigator.userAgent),
                    maxFileSize: 999000,
                    acceptFileTypes: /(\.|\/)(c|cpp|h|hpp)$/i
                });
            }
        ])

        .controller('FileUploadController', [
            '$scope', '$http', '$filter', '$window',
            function ($scope, $http) {
                $scope.options = {
                    url: url
                };

                $scope.loadingFiles = true;
                $http.get(url)
                    .then(
                        function (response) {
                            $scope.loadingFiles = false;
                            $scope.queue = response.data.files || [];
                        },
                        function () {
                            $scope.loadingFiles = false;
                        }
                    );
            }
        ])

        .controller('FileDestroyController', [
            '$scope', '$http',
            function ($scope, $http) {
                var file = $scope.file,
                    state;
                if (file.url) {
                    file.$state = function () {
                        return state;
                    };
                    file.$destroy = function () {
                        state = 'pending';
                        return $http({
                            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);
                    };
                }
            }
        ]);

}());

在我看来，我有一个带有data-ng-app="file-upload" 和data-ng-controller="FileUploadController" 的表单。

这是我当前的 Spring 控制器：

@Controller
public class ExerciseValidatorController {

private static final String OUTPUT_FILEPATH = "D:/tmp/";

private final LinkedList<FileMeta> files = new LinkedList<>();

/**
 * Called on index page, returns the file upload page
 * @return the file upload page
 */
@RequestMapping(value = "/", method = RequestMethod.GET)
public String showExerciseValidator() {
    return "FileUploadView";
}

/**
 * Called when files are uploaded, write them to disk and call the validation page
 * @param request the request
 * @param response the response
 * @return TBD
 */
@RequestMapping(value="/upload/", method = RequestMethod.POST)
public @ResponseBody
LinkedList<FileMeta> postUpload(HttpServletRequest request, HttpServletResponse response) {
    if(!(request instanceof MultipartHttpServletRequest)) {
        return null;
    }

    Iterator<String> itr = ((MultipartHttpServletRequest)request).getFileNames();
    MultipartFile mpf = null;

    while (itr.hasNext()) {
        mpf = ((MultipartHttpServletRequest)request).getFile(itr.next());

        final FileMeta fileMeta = new FileMeta();
        fileMeta.setFileName(mpf.getOriginalFilename());
        fileMeta.setFileSize(mpf.getSize() / 1024 + " kB");
        fileMeta.setFileType(mpf.getContentType());

        try {
            fileMeta.setBytes(mpf.getBytes());

            FileCopyUtils.copy(mpf.getBytes(), new FileOutputStream(OUTPUT_FILEPATH + mpf.getOriginalFilename()));
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        files.add(fileMeta);
    }

    return files;
}
}

当我使用 Firebug 测试我的视图时，我收到以下错误：“NetworkError: 405 Method Not Allowed - http://localhost:8080/ExerciseValidator/upload/”

当我尝试上传文件时没有任何反应：我可以在我的硬盘驱动器中选择一个文件，但它没有显示在可以上传的文件列表中。

我还尝试在我的 Spring 控制器中为 /upload/ 上的 GET 方法添加一个处理程序。但是即使它摆脱了 405 错误，我也不知道我应该如何处理这个请求。此外，我没有注意到 UI 有任何改进：可上传文件列表没有显示出来。

有人知道我应该怎么做吗？

Answer 1

在 Javascript 文件中，控制器使用名称 FileUploadController 定义，但该控制器的名称已在 jquery.fileupload-angular.js 中定义。将其更改为 InternalFileUploadController（例如）解决了问题。