如何发布JSON和文件，以Web服务与角？ [英] How to POST JSON and a file to web service with Angular?

问题描述

我如何发送带有AngularJS POST请求？该JSON部分是必需的，但该文件不是。我曾尝试此基础上对其他博客文章，但它不工作。我得到的错误请求400错误的

200分，正确答案将被添加

  VAR测试= {
  说明：测试，
  状态：拒绝
};变种FD =新FORMDATA（）;
fd.append（数据，angular.toJson（测试））;返回$ http.post（'/服务器，FD {
  transformRequest：angular.identity，
  标题：{
    内容类型：未定义
  }
}）;
 

解决方案

我测试过你的code用一个简单的Spring的后端，它工作正常：

@Controller
公共类FileController {  @ResponseBody
  @RequestMapping（值=/数据/文件上传，方法= RequestMethod.POST）
  公共字符串postFile（@RequestParam（值=文件，要求= FALSE）MultipartFile文件，
                       @RequestParam（值=数据）的数据对象）抛出异常{
    的System.out.println（数据=+数据）;    返回OK！;
  }
}


我用你的客户端code具有角V1.1.5：

VAR测试= {
  说明：测试，
  状态：拒绝
};变种FD =新FORMDATA（）;
fd.append（数据，angular.toJson（测试））;//删除注释文件追加到该请求
// VAR oBlob =新的Blob（['测试']，{类型：text / plain的}）;
//fd.append(\"file，oBlob，'的test.txt'）;返回$ http.post（'/数据/文件上传'，FD {
  transformRequest：angular.identity，
  标题：{
    内容类型：未定义
  }
}）;


请求看起来像这样（从Chrome的控制台网络选项卡复制）：

 请求URL：http：//本地主机：8080 /数据/文件上传
请求方法：POST
状态code：200 OK请求头
POST /数据/文件上传HTTP / 1.1
主机：本地主机：8080
...
内容类型：多重/ form-data的;边界= ---- WebKitFormBoundaryEGiRWBFzWY6xwelb
引用者：HTTP：//本地主机：8080 /
...
请求负载
------ WebKitFormBoundaryEGiRWBFzWY6xwelb
内容处置：表格数据; NAME =数据{说明：测试，状态：拒绝}
------ WebKitFormBoundaryEGiRWBFzWY6xwelb--
 

响应200 OK，并且控制台输出预计： {说明：测试，状态：拒绝}

How do I send a POST request with AngularJS? The JSON part is required but the file is not. I have tried this based on other blog posts but it does not work. I get a Bad request 400 error.

200 points to the correct answer will be added

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

解决方案

I've tested your code with a simple Spring backend and it works fine:

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

I've used your client side code with angular 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
  }
});

The request looks like this (copied from Chrome console network tab):

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--

Response 200 OK, and the console outputs the expected: {"description":"Test","status":"REJECTED"}

这篇关于如何发布JSON和文件，以Web服务与角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！