Làm thế nào để POST JSON và một tập tin vào dịch vụ web với Angular?

Question

Làm cách nào để gửi yêu cầu POST với AngularJS? Phần JSON là bắt buộc nhưng tệp thì không. Tôi đã thử điều này dựa trên các bài đăng trên blog khác nhưng nó không hoạt động. Tôi nhận được Yêu cầu không hợp lệ 400 lỗi.

200 điểm cho câu trả lời đúng sẽ được thêm vào

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

Tôi đã kiểm tra mã của bạn với một mùa xuân backend đơn giản và nó hoạt động tốt:

@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!"; 
    } 
} 

Tôi đã sử dụng mã phía khách hàng của bạn với v1.1.5 góc:

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

Yêu cầu có dạng như sau (được sao chép từ tab mạng của bảng điều khiển 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-- 

Trả lời 200 OK và giao diện điều khiển sẽ xuất ra dự kiến: {"description":"Test","status":"REJECTED"}

Answer 2

Bạn có thể gửi nội dung JSON trực tiếp trong các dữ liệu POST.

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

Tùy thuộc vào đặc tả API, bạn có thể phải thêm loại nội dung.

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