使用angular js的带有文件和其他输入字段的Spring rest post请求答案

【问题标题】：Spring rest post request with file and other input fields using angular js使用angular js的带有文件和其他输入字段的Spring rest post请求
【发布时间】：2017-04-28 09:14:04
【问题描述】：

我正在尝试通过提交文件作为输入和其他输入文本字段来调用发布请求，我的代码如下-

Java端-

 @RequestMapping(value = "upload",consumes = {"multipart/form-data"}, 
 headers={"Content-Type=multipart/form-data"},  produces = {"multipart/form-
 data"},  method = RequestMethod.POST)
 public AjaxResponseData<String> upload(@RequestBody RegisterModel 
 registerModel,@RequestParam(value="file_source", required = false) 
 MultipartFile file) {

 }

角边-

$scope.upload= function() {
    $http({
        method: 'POST',
        headers: {
            'Content-Type': 'multipart/form-data',
            'Accept': 'multipart/form-data',
        },
        data: {"Name": $scope.name,
            "address": $scope.address,
            "id": $scope.id,
            "phoneNumber": $scope.phone,
            "faxNumber": $scope.fax,
            "email": $scope.email,
            "note": $scope.note,
            "file": $scope.file_source},
            url: '/tps/register/upload'
        }) .then(function(response) { }
    }

每当我试图用错误代码 415 调用它给不支持的媒体类型时。

【问题讨论】：

您发送的 JSON 不是多部分请求...
"file": $scope.file_source 是一个文件。
无论如何。您将所有内容都作为 JSON 而不是多部分形式传递。
你能告诉我如何通过其他输入字段传递多部分表单请求吗？

标签： java angularjs spring web-services rest

【解决方案1】：

415 错误代表 Unsupported Media Type：

请求实体具有服务器或资源所具有的媒体类型不支持。

您将 JSON 发送到您的服务器，但您定义了：

'Content-Type': 'multipart/form-data'

改成

'Content-Type': 'application/json'

服务器端也一样：

consumes = {"multipart/form-data"}

收件人：

consumes = {"application/json"}

【讨论】：

但我也在发送文件，application/json 可以处理多部分请求吗？
@user3864129 在您的 HTTP POST 中，我只看到 JSON。试试我的建议:)

【解决方案2】：

当我在我的代码中使用它时，您可以参考此代码进行文件上传。 java代码：

 @RequestMapping(value = "/upload", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA)
    public URL uploadFileHandler(@RequestParam("name") String name,
                                 @RequestParam("file") MultipartFile file) throws IOException {

/******* Printing all the possible parameter from @RequestParam *************/

        System.out.println("*****************************");

        System.out.println("file.getOriginalFilename() " + file.getOriginalFilename());
        System.out.println("file.getContentType()" + file.getContentType());
        System.out.println("file.getInputStream() " + file.getInputStream());
        System.out.println("file.toString() " + file.toString());
        System.out.println("file.getSize() " + file.getSize());
        System.out.println("name " + name);
        System.out.println("file.getBytes() " + file.getBytes());
        System.out.println("file.hashCode() " + file.hashCode());
        System.out.println("file.getClass() " + file.getClass());
        System.out.println("file.isEmpty() " + file.isEmpty());

        /*************Parameters to b pass to s3 bucket put Object **************/
        InputStream is = file.getInputStream();
        String keyName = file.getOriginalFilename();
}

角度代码

var form = new FormData();
form.append("file", "image.jpeg");

var settings = {
 "async": true,
 "crossDomain": true,
 "url": "http://url/",
 "method": "POST",
 "headers": {
   "cache-control": "no-cache"
 },
 "processData": false,
 "contentType": false,
 "mimeType": "multipart/form-data",
 "data": form
}

$.ajax(settings).done(function (response) {
 console.log(response);
});

【讨论】：