java angularjs spring file upload

Question

我正在尝试使用angularjs和Spring(到Amazon AWS(将文件上传到服务器。 我用第一个和后者检查了几个上传帖子，但我仍然无法让两者一起工作。

使用 AngularJS 上传文件

如何使用AngularJS上传文件？

还检查了YouTube上的教程，找到了黑云，布伦特·奥雷利的频道，我只是想不通。

您必须在我的 web 应用程序中进行身份验证才能发送帖子请求，但我在登录时也收到错误。

将非常感谢一些帮助。

这是我的 html 表单：

<form>
<input type="file" file-model="file">
<button ng-click="submit()" type="submit">Click</button>
</form>

文件模型的指令：

.directive('fileModel', ['$parse', function($parse){
return {
restrict: 'A',
link: function(scope, element,attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function() {
scope.$apply(function() {
modelSetter(scope, element[0].files[0]);
})
})
}
}
}])

控制器：

.controller('UploadController', ['$scope', 'multipartForm', function($scope, multipartForm) {
$scope.file = {}; 
$scope.submit = function() {
var uploadUrl = '/uploadtest';
multipartForm.post(uploadUrl, $scope.file);
}       
}])

多部分表单服务：

.service('multipartForm', ['$http', function($http){
this.post = function(uploadUrl, data) {
var fd = new FormData();
for(var key in data) {
fd.append(key, data[key]);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
}
}])

弹簧端点：

@RestController
@RequestMapping("/storage/")
public class BucketController {
private AmazonClient amazonClient;
@Autowired
public BucketController(AmazonClient amazonClient) {
this.amazonClient = amazonClient;
}
@RequestMapping(value = "/uploadtest", method = RequestMethod.POST)
public String uploadFile(@RequestParam(value = "file") MultipartFile file) {
System.out.println("Uploading file!!!!!!!!!!!!");
return this.amazonClient.uploadFile(file);
}  
}

我在浏览器中遇到的错误：

角度.js：15018 可能未处理的拒绝： {"data"：{"timestamp"：1537033312586，"status"：400，"error"："Bad Request"，"exception"："org.springframework.web.multipart.support.MissingServletRequestPartException"，"message"："Required request part 'file' 不存在"，"path"："/uploadtest"}， "状态"：400， "config"：{"method"："POST"，"transformResponse"：[null]， "jsonpCallbackParam"："callback"， "headers"：{"Accept"："application/json， 文本/纯文本，/"， "X-Request-with"："XMLHttpRequest"， "授权"： "Basic c3p5bW9uc3R1c3pla0BnbWFpbC5jb206dGVzdA=="， "X-XSRF-TOKEN"："395d1e27-a6ee-4948-b673-39d31902e1ae"}， "url"："/uploadtest"，"data"：{}}， "statusText"："，"xhrStatus"："complete"}

Answer 1

由于缺少未显示的查询参数"文件"而发生异常。 在 Spring 端点中，您不应该在请求参数中收到文件请求！

@RequestMapping(value="/uploadtest", consumes = "multipart/form-data",method = RequestMethod.POST, produces = "application/json")
public String uploadFile(MultipartHttpServletRequest  request) throws Exception{
try {
MultipartFile multipartFile1 = request.getFile("file");
if (multipartFile1 != null) {
String file1 = multipartFile1.getOriginalFilename();
InputStream inputStream = multipartFile1.getInputStream();
// do whatever 
}
} catch (IOException e) {
logger.error(e.getMessage());
}
return null;
}

在多部分表单的服务中，将标题内容类型更改为：多部分/表单数据

希望这会有所帮助！！