使用 Angularjs 将文件上传到 SpringMVC 时出现错误状态 415答案

【问题标题】：Error status 415 when uploading Files to SpringMVC using Angularjs使用 Angularjs 将文件上传到 SpringMVC 时出现错误状态 415
【发布时间】：2018-02-02 05:33:42
【问题描述】：

如何使用 Angularjs 上传文件和表单数据？

我正在开发一个使用 AngularJs 构建的 UI。它有一个表单，用户可以在其中输入他们的详细信息，例如 ID、姓名、地址、PIN 等。除此之外，我还必须提供一个功能，用户可以在其中上传多个文件以及 FormData。

我已经阅读了 AngularJs 中的文件上传教程，并创建了一个上传文件的指令。

JavaScript 中的代码如下所示，

var formData = new FormData();  
formData.append('id', $scope.id);
formData.append('name', $scope.name);
formData.append('addressLine1', $scope.addressLine1);
formData.append('addressLine2', $scope.addressLine2);
formData.append('road', $scope.road);
formData.append('city', $scope.city);
formData.append('pin', $scope.pin);
formData.append('state', $scope.state);
formData.append('country', $scope.country);
formData.append('file', $scope.file);

$http({
    method: 'POST',
    url: baseURL + "item/" + $scope.id,
    data: formData,
    responseType: 'arraybuffer',
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined},
 });

在 Spring MVC 中，控制器看起来像，

@RequestMapping(value = "item/{id}", method = RequestMethod.POST,
                consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public @ResponseBody ResponseResource addData(@PathVariable String id,
       @RequestParam DataRequestResource dataRequestResource,
       @RequestParam(value = "file") MultipartFile file){

DataRequestResource 包含，

public class DataRequestResource {

    private String id;  
    private String name;
    private String addressLine1;    
    private String addressLine2;    
    private Long road;  
    private String city;    
    private String pin; 
    private String state;   
    private String country;

}

当我尝试执行此操作时，我得到了

415 (Unsupported Media Type)

我可以对每个变量使用@RequestParam 来完成这项工作。但是有没有一种方法可以让我在单独的参数中获取资源对象中的表单数据和文件？

【问题讨论】：

Angularjs how to upload multipart form data and a file?的可能重复
如果$scope.file 是来自Filelist 的File object，则AngularJS 代码是正确的。开发者控制台的网络选项卡为有效负载显示什么？
注意：如果$scope.file 是Filelist，则只将$scope.file[0] 附加到FormData object。
这个答案可能会有所帮助stackoverflow.com/questions/42671510/…

标签： java angularjs spring spring-mvc angularjs-http

【解决方案1】：

var data = new FormData();
for (var i = 0; i < files.length; i++) {
    data.append("Photo",files[i]);
}
data.append('description',description);

$http.post('/api/timeline/submit_post',data,{
    transformRequest: angular.identity,     
    headers: {'Content-Type': undefined}
}).then(function(response){
    var res = response.data;
     if(res.status == "Success"){
         $scope.$emit('hide_loader');
         $scope.$parent.posts = [];
         $scope.$parent.time = Date.now()/1000;
         $scope.$parent.getAllPostOfTimeline();
         toaster.pop('success', 'Post uploaded successfully.');   
         $scope.description = '';       
         $scope.modal.close();                
     }else{
         $scope.$emit('hide_loader');
         toaster.pop("error",res.msg);
     }
 },function(err){
     $scope.$emit('hide_loader');
     toaster.pop("error","Server");
 });

【讨论】：