Ява Angularjs Spring файл загрузки

Question

Я пытаюсь загрузить файл на сервер, используя angularjs и Spring (в Amazon AWS). Я проверил пару постов о загрузке с первым и последним, но я все еще не могу заставить оба работать вместе.

Загрузка файла с использованием AngularJS

Как загрузить файл с AngularJS?

Также проверил YouTube на предмет учебных пособий, нашел Черное Облако, канал Брента Аурели, и я просто не могу понять это.

Вы должны пройти проверку подлинности в моем веб-приложении для отправки почтовых запросов, но я также получаю сообщения об ошибках при входе в систему.

Буду очень признателен за помощь.

Это моя 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}
        })
    }
}])

Конечная точка пружины:

@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": " Обязательная часть запроса 'файл' отсутствует "," путь ":" / uploadtest "}, "Статус": 400, "Конфигурация": { "метод": "POST", "transformResponse": [NULL], "JsonpCallbackParam": "Обратный вызов", "заголовки": { "Accept": "приложения / JSON, текст / обычный, /", "X-Requested-With": "XMLHttpRequest", «Авторизация»: "Basic c3p5bW9uc3R1c3pla0BnbWFpbC5jb206dGVzdA ==", "X-XSRF-ЗНАК": "395d1e27-a6ee-4948-b673-39d31902e1ae"}, "URL": "/ uploadtest", "данные": {}}, "Его статус": "", "xhrStatus": "полный"}

Answer 1

Исключение произошло из-за отсутствующего параметра запроса "file", который не представлен.И в конечной точке Spring вы не должны получать запрос файла в параметре Request!

    @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 для multipartForm измените тип содержимого заголовков на: multipart / form-data

Надеюсь, что этопомог бы !!