Jak POST JSON i plik do serwisu internetowego z Angular?

Question

Jak wysłać żądanie POST z AngularJS? Część JSON jest wymagana, ale plik nie jest. Próbowałem tego na podstawie innych wpisów na blogu, ale to nie działa. Otrzymuję błąd Błąd żądania 400.

200 punktów do prawidłowej odpowiedzi zostaną dodane

var test = { 
    description:"Test", 
    status: "REJECTED" 
}; 

var fd = new FormData(); 
fd.append('data', angular.toJson(test)); 

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

Answer 1

Przetestowałem kod z prostym wiosennym backend i działa prawidłowo:

@Controller 
public class FileController { 

    @ResponseBody 
    @RequestMapping(value = "/data/fileupload", method = RequestMethod.POST) 
    public String postFile(@RequestParam(value="file", required=false) MultipartFile file, 
         @RequestParam(value="data") Object data) throws Exception { 
    System.out.println("data = " + data); 

    return "OK!"; 
    } 
} 

Użyłem kodu po stronie klienta z kątowym v1.1.5:

var test = { 
    description:"Test", 
    status: "REJECTED" 
}; 

var fd = new FormData(); 
fd.append('data', angular.toJson(test)); 

//remove comment to append a file to the request 
//var oBlob = new Blob(['test'], { type: "text/plain"}); 
//fd.append("file", oBlob,'test.txt'); 

return $http.post('/data/fileupload', fd, { 
    transformRequest: angular.identity, 
    headers: { 
    'Content-Type': undefined 
    } 
}); 

Żądanie wygląda następująco (skopiowane z karty sieciowej konsoli Chrome):

Request URL:http://localhost:8080/data/fileupload 
Request Method:POST 
Status Code:200 OK 

Request Headers 
POST /data/fileupload HTTP/1.1 
Host: localhost:8080 
... 
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryEGiRWBFzWY6xwelb 
Referer: http://localhost:8080/ 
... 
Request Payload 
------WebKitFormBoundaryEGiRWBFzWY6xwelb 
Content-Disposition: form-data; name="data" 

{"description":"Test","status":"REJECTED"} 
------WebKitFormBoundaryEGiRWBFzWY6xwelb-- 

Odpowiedź 200 OK, a konsola wyprowadza oczekiwane: {"description":"Test","status":"REJECTED"}

Answer 2

można dodawać zawartość JSON bezpośrednio w danych POST.

$http.post(URI, JSON.stringify(test)); 

W zależności od specyfikacji interfejsu API może być konieczne dodanie typu zawartości.

$http.post(URI, JSON.stringify(test), {headers: {'Content-Type': 'application/json'}});