Spring MVC中使用多不形 [英] Using Multipart without Form in Spring MVC

问题描述

我已通过这一特定主题的计算器中的许多文章不见了，一个详细的分析，我终于敢张贴在同一主题的另外一个问题了。

I had gone through many articles in stackoverflow on this specific topic, after a detailed analysis I have finally dared to post another question on the same topic.

我认为这将是显而易见的，我想在这里做的，

I think this would be obvious that what I wanted to do here,

我想要什么？

我要上传的文件。我使用angularjs和Spring MVC。

I want to upload a file. I am using angularjs and Spring MVC.

来源：

控制器@Spring：

@RequestMapping(value="/upload", method=RequestMethod.POST, consumes = {"multipart/form-data"})
public String handleFileUpload(@RequestParam(value = "file") MultipartFile file){
    String name="";
    if (!file.isEmpty()) {
        try {
            byte[] bytes = file.getBytes();
            BufferedOutputStream stream =
                    new BufferedOutputStream(new FileOutputStream(new File(name)));
            stream.write(bytes);
            stream.close();
            return "You successfully uploaded " + name + "!";
        } catch (Exception e) {
            return "You failed to upload " + name + " => " + e.getMessage();
        }
    } else {
        return "You failed to upload " + name + " because the file was empty.";
    }
}
@Bean
    public MultipartResolver multipartResolver() {
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
        multipartResolver.setMaxUploadSize(500000000);
        return multipartResolver;
    }

HTML：

File to upload: <input type="file"
            file-model="file" name="fd"><br /> Name: <input type="text" name="name"><br />
        <br /> <input type="submit" ng-click="uploadFile()" value="Upload"> Press here to
        upload the file!

JS：

$scope.uploadFile = function() {
    var fd = new FormData();
    var file = $scope.file;
    fd.append('file', file);
    $http.post("/upload",fd,
            {
                headers : {
                    'Content-Type' : undefined
                }
            }).success(function(data) {
        debugger;
    }).error(function(data) {
        debugger;
    })
}

看起来公平？这里是观察

Looks fair??? Here are the observations

在执行的意见：

参考文献：

<一个href=\"http://stackoverflow.com/questions/21015891/spring-mvc-angularjs-file-upload-org-apache-commons-fileupload-fileuploade\">Spring MVC - AngularJS - 文件上传 - org.apache.commons.fileupload.FileUploadException

<一个href=\"http://stackoverflow.com/questions/2198470/javascript-uploading-a-file-without-a-file/2198524#2198524\">Javascript:上传文件...没有一个文件

<一个href=\"http://stackoverflow.com/questions/2305218/what-is-the-boundary-parameter-in-an-http-multi-part-post-request\">What是一个HTTP多部分（POST）请求的边界参数？

和更多的....：）

更新

指令这是在使用的角度，

Directive which is used in angular,

myApp.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

从Chrome中提取请求：

推荐答案

问题在我的方法：

我创建了一个MultiPartResolver豆。解决该问题后，我的理解是，只有当你想要一个特定类型的文件或非常特定于应用程序的东西像你这样定义这个bean。虽然我寻求更深入地了解这一点，将非常乐意计算器的技术人员听到。

I created a bean for MultiPartResolver. My understanding after resolving the issue is like you define this bean only when you want a specific type of file or something very specific to the application. Although I seek more insight into this and would love to hear from techies of stackoverflow.

解决方案目前存在的问题：

我想给我的源$ C ​​$ C，

I would give my source code,

HTML：

<div ng-controller="myCtrl">
        <input type="file" file-model="myFile" />
        <button ng-click="uploadFile()">upload me</button>
    </div>

AngularJS：

     var myApp = angular.module('myApp', []);

        myApp.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[0]);
                        });
                    });
                }
            };
        }]);
        myApp.controller('myCtrl', ['$scope', '$http', function($scope, $http){

            $scope.uploadFile = function(){
                var file = $scope.myFile;
                var fd = new FormData();
                fd.append('file', file);
    //We can send anything in name parameter, 
//it is hard coded to abc as it is irrelavant in this case.
                var uploadUrl = "/upload?name=abc";
                $http.post(uploadUrl, fd, {
                    transformRequest: angular.identity,
                    headers: {'Content-Type': undefined}
                })
                .success(function(){
                })
                .error(function(){
                });
            }

        }]);

春季：

@RequestMapping(value="/upload", method=RequestMethod.POST)
    public String handleFileUpload(@RequestParam("name") String name,
            @RequestParam("file") MultipartFile file){
        if (!file.isEmpty()) {
            try {
                byte[] bytes = file.getBytes();
                BufferedOutputStream stream =
                        new BufferedOutputStream(new FileOutputStream(new File(name)));
                stream.write(bytes);
                stream.close();
                return "You successfully uploaded " + name + "!";
            } catch (Exception e) {
                return "You failed to upload " + name + " => " + e.getMessage();
            }
        } else {
            return "You failed to upload " + name + " because the file was empty.";
        }
    }

和@arahant尽管我们没有看到请求负载任何文件的base64内容，同时发送请求，角不发送MultiPartFile，这里是截图

And @arahant Even though we don't see any document base64 content in the request payload while sending request, angular does send MultiPartFile, here is the screenshot

感谢所有引用。如果没有这些人我就不会在所有的解决了这个问题。

Thanks to all the references. If not for these people I wouldn't have solved this problem at all.

参考文献：

http://uncorkedstudios.com/blog/multipartformdata-file-upload-与-angularjs

这篇关于Spring MVC中使用多不形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！