java angularjs spring文件上传

Question

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

File Upload using AngularJS

How to upload a file with AngularJS?

还查看了 youtube 上的教程，找到了 Black Cloud，Brent Aureli 的频道，我就是想不通。

您必须在我的 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);
    }       
}])

multipartForm 服务：

.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}
        })
    }
}])

Spring 端点：

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

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

angular.js:15018 可能未处理的拒绝： {"data":{"timestamp":1537033312586,"status":400,"error":"Bad Request","exception":"org.springframework.web.multipart.support.MissingServletRequestPartException","message":"所需的请求部分“文件”不存在","path":"/uploadtest"}, “状态”：400， "config":{"method":"POST","transformResponse":[null], "jsonpCallbackParam":"回调", “标头”：{“接受”：“应用程序/json， 文本/纯文本，/", "X-Requested-With":"XMLHttpRequest", “授权”： "基本 c3p5bW9uc3R1c3pla0BnbWFpbC5jb206dGVzdA==", "X-XSRF-TOKEN":"395d1e27-a6ee-4948-b673-39d31902e1ae"}, "url":"/uploadtest","data":{}}, "statusText":"","xhrStatus":"完成"}

Answer 1

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

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

在 Service for multipartForm 中，将标题内容类型更改为：multipart/form-data

希望这会有所帮助！