javascript – 如何使用Angular将JSON和文件发布到Web服务？

如何使用AngularJS发送POST请求？ JSON部分是必需的,但文件不是.我已经尝试过基于其他博客文章,但它不起作用.我收到错误请求400错误.

将添加200点正确答案

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

解决方法

我用一个简单的Spring后端测试了你的代码,它运行正常：

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

我使用了角度v1.1.5的客户端代码：

var test = {
  description:"Test",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',headers: {
    'Content-Type': undefined
  }
});

该请求如下所示(从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--

响应200 OK,控制台输出预期的：{“description”：“Test”,“status”：“REJECTED”}