Spring MVC-AngularJS-File Upload-org.Apacz.commons.fileupload.FileUploadException

Wprowadzenie

Miałem ten sam problem i znalazłem kompletne rozwiązanie, aby wysłać zarówno json jak i plik ze strony bazującej na angular do metody Spring MVC.

Głównym problemem jest $http, który nie wysyła odpowiedniego nagłówka Content-type (wyjaśnię dlaczego).

The theory about multipart / form-data

Aby wysłać zarówno json jak i file musimy wysłać multipart / form-data, co oznacza "wysyłamy różne elementy w ciele oddzielone specjalnym separatorem". This special separator nazywa się "boundary" , który jest ciągiem znaków, który nie występuje w żadnym z elementów, które mają być wysłane.

Serwer musi wiedzieć, która granica jest używana, więc musi być wskazana w nagłówku Content-type (Content-Type multipart / form-data; boundary = $the_boundary_used).

Więc... potrzebne są dwie rzeczy:

1. w nagłówku --> wskaż multipart / form-data i która granica jest używana (tutaj jest miejsce, w którym $http nie działa)
2. w ciele --> oddzielenie każdego parametru żądania granicą

Przykład dobrej prośby:

Header

Content-Type    multipart/form-data; boundary=---------------------------129291770317552

Który mówi serwerowi " wysyłam wiadomość wieloczęściową z następnym separatorem (boundary): ---------------------------129291770317552

Ciało

-----------------------------129291770317552 Content-Disposition: form-data; name="clientInfo" 
{ "name": "Johny", "surname":"Cash"} 

-----------------------------129291770317552 
Content-Disposition: form-data; name="file"; filename="yourFile.pdf"           
Content-Type: application/pdf 
%PDF-1.4 
%õäöü 
-----------------------------129291770317552 --

Gdzie wysyłamy 2 argumenty," clientInfo "i" file " oddzielone granicą.

Problem

Jeśli żądanie jest wysyłane z $http, granica nie jest wysyłana w nagłówku (punkt 1), więc Spring nie jest w stanie przetworzyć danych (nie wie, jak podzielić "części" żądania).

Inny problem polega na tym, że granica jest znana tylko przez FormData... ale FormData nie ma żadnych accesorów, więc nie można wiedzieć, która granica jest używana!!!

Rozwiązanie

Zamiast używać $http w js powinieneś użyć standardowego XMLHttpRequest, coś w stylu:

//create form data to send via POST
var formData=new FormData();

console.log('loading json info');
formData.append('infoClient',angular.toJson(client,true)); 
// !!! when calling formData.append the boundary is auto generated!!!
// but... there is no way to know which boundary is being used !!!

console.log('loading file);
var file= ...; // you should load the fileDomElement[0].files[0]
formData.append('file',file);

//create the ajax request (traditional way)
var request = new XMLHttpRequest();
request.open('POST', uploadUrl);
request.send(formData);

Wtedy w Twojej wiosennej metodzie możesz mieć coś w stylu:

@RequestMapping(value = "/", method = RequestMethod.POST)
public @ResponseBody Object newClient(
        @RequestParam(value = "infoClient") String infoClientString,
        @RequestParam(value = "file") MultipartFile file) {

    // parse the json string into a valid DTO
    ClientDTO infoClient = gson.fromJson(infoClientString, ClientDTO.class);
    //call the proper service method
    this.clientService.newClient(infoClient,file);

    return null;

}

Odpowiedź Carlosa Verdesa nie zadziałała z moim $ http interceptor, który dodaje nagłówki autoryzacji i tak dalej. Postanowiłem więc dodać do jego rozwiązania i stworzyć moje używając $http.

Clientside Angular (1.3.15)

Mój formularz (używając składni controllerAs ) zakłada plik i prosty obiekt zawierający informacje potrzebne do wysłania na serwer. W tym przypadku używam prostej nazwy i typ String właściwość.

<form>
    <input type="text" ng-model="myController.myObject.name" />

     <select class="form-control input-sm" ng-model="myController.myObject.type"
      ng-options="type as type for type in myController.types"></select>

     <input class="input-file" file-model="myController.file" type="file">

</form>

Pierwszy krok było stworzenie dyrektywy, która wiąże mój plik z zakresem wyznaczonego kontrolera (w tym przypadku myController), abym mógł uzyskać do niego dostęp. Powiązanie go bezpośrednio z Modelem w kontrolerze nie będzie działać, ponieważ plik input type = file nie jest wbudowaną funkcją.

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

Po Drugie stworzyłem fabrykę o nazwie myObject za pomocą metody instancji create , która pozwala mi przekształcić dane po wywołaniu create na serwerze. Ta metoda dodaje wszystko do obiektu FormData i konwertuje go za pomocą metoda transformRequest (angular.tożsamość ). Ważne jest, aby ustawić nagłówek na undefined . (Starsze wersje kątowe mogą wymagać ustawienia czegoś więcej niż undefined). Pozwoli to na Automatyczne ustawienie znacznika multidata/boundary (Zobacz post Carlosa).

  myObject.prototype.create = function(myObject, file) {
        var formData = new FormData();
        formData.append('refTemplateDTO', angular.toJson(myObject));
        formData.append('file', file);

        return $http.post(url, formData, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined }
        });
}

Po stronie klienta pozostaje jedynie utworzenie instancji nowego myObject w myController i wywołanie metody create w funkcji create kontrolera po przesłaniu formularza.

this.myObject = new myObject();

this.create = function() {
        //Some pre handling/verification
        this.myObject.create(this.myObject, this.file).then(
                              //Do some post success/error handling
                            );
    }.bind(this);

Serverside Spring (4.0)

Na Restcontrolle mogę teraz po prostu wykonać następujące czynności: (zakładając, że mamy POJO MyObject)

@RequestMapping(method = RequestMethod.POST)
@Secured({ "ROLE_ADMIN" }) //This is why I needed my $httpInterceptor
public void create(MyObject myObject, MultipartFile file) {
     //delegation to the correct service
}

UWAGA, nie używam requestparameters, ale pozwalam spring zrobić konwersję JSON do POJO/DTO. Upewnij się, że masz MultiPartResolver bean również skonfigurowany poprawnie i dodany do pom.xml. (I Jackson-Mapper w razie potrzeby)

Wiosna-kontekst.xml

<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="268435456" /> <!-- 256 megs -->
</bean>

Pom.xml

<dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>${commons-fileupload.version}</version> 
</dependency>

Możesz spróbować tego

.js

$scope.uploadFile=function(){
    var formData=new FormData();
    formData.append("file",file.files[0]);
    $http.post('/serverApp/rest/newDocument', formData, {
        transformRequest: function(data, headersGetterFunction) {
            return data;
        },
        headers: { 'Content-Type': undefined }
        }).success(function(data, status) {                       
            alert("Success ... " + status);
        }).error(function(data, status) {
            alert("Error ... " + status);
        });

.java

@Controller
public class DocumentUploadController {
@RequestMapping(value="/newDocument", method = RequestMethod.POST)
    public @ResponseBody void UploadFile(@RequestParam(value="file", required=true) MultipartFile file) {
        String fileName=file.getOriginalFilename();
        System.out.println(fileName);
    }
}

To na podstawie https://github.com/murygin/rest-document-archive

Jest dobry przykład przesyłania plików https://murygin.wordpress.com/2014/10/13/rest-web-service-file-uploads-spring-boot/