[SPRING] Spring MVC에서 Form없이 Multipart 사용하기

Spring MVC에서 Form없이 Multipart 사용하기

나는이 특정 주제에 대해 stackoverflow에서 많은 기사를 읽었으며, 세부적인 분석을 마친 후에야 마침내 같은 주제에 대해 다른 질문을 게시하게되었습니다.

나는 이것이 내가 여기서하고 싶었던 것이 분명 할 것이라고 생각한다.

내가 원하는 것?

파일을 업로드하고 싶습니다. angularjs와 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;
    })
}

공정한 모양? 여기 관측이있다.

실행에 대한 관찰 :

참고 문헌 :

Spring MVC - AngularJS - 파일 업로드 - org.apache.commons.fileupload.FileUploadException

자바 스크립트 : 파일없이 파일 업로드 중 ...

HTTP 멀티 파트 (POST) 요청의 경계 매개 변수는 무엇입니까?

그리고 더 많은....:)

최신 정보

각도,

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]);
            });
        }
    }
}]);

크롬에서 추출한 요청 :

해결법

1. ==============================

   1.내 접근 방식의 문제점 :

   내 접근 방식의 문제점 :

   나는 MultiPartResolver를위한 빈을 만들었다. 이 문제를 해결 한 후에 필자가 알고있는 것은 특정 유형의 파일이나 애플리케이션에 매우 특정한 것을 원할 때만이 Bean을 정의하는 것과 같다. 비록 내가 이것에 대해 더 많은 통찰력을 찾고, stackoverflow의 기술자로부터 듣고 싶어한다.

   현재의 문제에 대한 해결책 :

   나는 내 소스 코드를 줄 것이지만,

   HTML :

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

   각도 :

        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 콘텐츠가 표시되지 않더라도 Angular는 MultiPartFile을 보내고 여기 스크린 샷이 있습니다.

   모든 참고 덕분에. 이 사람들을 위해서가 아니라면이 문제를 전혀 해결하지 못했을 것입니다.

   참고 문헌 :

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

2. ==============================

   2.MultipartHttpServletRequest를 사용하면 간단한 변경이 가능합니다.

   MultipartHttpServletRequest를 사용하면 간단한 변경이 가능합니다.

   public String handleFileUpload(MultipartHttpServletRequest request) {
       Map<String, MultipartFile> uploadedFiles = request.getFileMap();
       //...
   }
   

from https://stackoverflow.com/questions/31774695/using-multipart-without-form-in-spring-mvc by cc-by-sa and MIT license