2015-11-11 101 views
0

我想使用angularjs作为前端,Spring Rest作为后端做文件上传。这里是我的前端代码:Spring @RequestParam不能使用HTML FormData

var data = evt.target.result; 
     var formData = new FormData(); 

     formData.set("fileId", 1); 
     formData.set("file", data); 

     $http({method: "POST", url: "/file", data: formData, headers : {"Content-Type": undefined}, transformRequest: angular.identity}).success(function() { 
      console.log("hi"); 
     }).error(function(reason) { 
      console.log(reason); 
     }); 

这里是我的后端代码:

@RequestMapping(value = "/file", method = POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE) 
public ResponseEntity<Void> uploadFile(@RequestPart("file") MultipartFile file) { 

我觉得我的代码应该是工作,但事实上,我不断收到错误400说“所需要求部分'文件'不存在”

有什么想法?谢谢。

下面是来自萤火虫的数据:

-----------------------------5045635351933894389797998578 
Content-Disposition: form-data; name="fileId" 

1 
-----------------------------5045635351933894389797998578 
Content-Disposition: form-data; name="file" 

%PDF-1.7 
%äãÃÃ’ 
4 0 obj 
<</Type/XObject 
/Subtype/Form 
/FormType 1 
/Matrix[1 0 0 1 0 0] 
/BBox[0 0 612 792] 
/Resources<</ExtGState<</GS0 5 0 R>>/ProcSet[/PDF/ImageC]/Properties<</MC0 6 0 R>>/XObject<</Im0 7 0 
R>>>>/Filter/FlateDecode/Length 343>> 
stream 
H‰”“ÃNÃ0†ïy 
¿@SDZ“øʆ&;ð 
-----------------------------5045635351933894389797998578-- 

我们可以清楚地看到帕拉姆的名字,一个是FILEID,另一种是文件。

+0

这篇文章在这里[multipartformdata-file-upload-with-angularjs](https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs)介绍了一个稍微不同的前端代码版本应该有使用angularjs ... – Filip

+0

而不是formData.set尝试formData.append –

+0

我使用formData.append之前我尝试formData.set @RameshKotha –

回答

2

我发明了它!错误是我试图上传文件的数据,而不是整个文件,其中包括数据,文件名和其他有用的属性。前面的代码是这样的:

var data = evt.target.result; 
     var formData = new FormData(); 

     formData.append("fileId", 1); 
     formData.append("file", data); 

我改变为以下:

var formData = new FormData(); 

     formData.append("fileId", 1); 
     formData.append("file", file); 

文件变量参照HTML5文件对象,而前一个参考文件的二进制数据。

相关问题