Использование Multipart без формы весной MVC

Question

Я прошел через многие статьи в 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 - File Upload - org.apache.commons.fileupload.FileUploadException

Javascript: Uploading a file... without a file

What is the boundary parameter in an HTTP multi-part (POST) Request?

И многое другое .... :)

---

Update

Директива, которая используется в угловых,

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

запрос извлекается из хрома:

Answer 1

Проблема в моем подходе:

Я создал компонент для MultiPartResolver.Мое понимание после решения проблемы похоже на то, что вы определяете этот компонент только тогда, когда вам нужен конкретный тип файла или что-то очень специфичное для приложения. Хотя я ищу больше понимания этого и хотел бы услышать от techies stackoverflow.

решение для текущей задачи:

Я отдал бы свой исходный код,

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(){ 
       }); 
      } 

     }]); 

Spring:

@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, вот скриншот

Благодаря всем ссылкам. Если бы не эти люди, я бы совсем не решил эту проблему.

Ссылки:

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

Answer 2

Использования MultipartHttpServletRequest будет простым вариантом здесь, который должен работать без каких-либо других изменений.

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