AngularJS: ошибка 405 при загрузке нескольких изображений с multipart / form-data - PullRequest
Новая
       54

AngularJS: ошибка 405 при загрузке нескольких изображений с multipart / form-data

0 голосов
/ 08 марта 2019

Я сталкиваюсь с 405 ошибкой при загрузке нескольких файлов (изображений) через multipart / data-form.Я могу отправлять изображения по запросу, и, кажется, моя полезная нагрузка показывает правильные данные (границы).Но я получаю пустой ответ 405 на (API), и response.status показывает ошибку 405 (метод не разрешен).Мне интересно, что может быть не так, потому что все выглядит нормально.

Однако я подозреваю, что это может быть связано с границами в request-payload .Я также узнал, что браузеры меняют MIME-TYPE при загрузке, и это конфликтует с multipart / formData.

Пожалуйста, сообщите, что может быть не так.Ниже мой код.

Директива (загрузка файла) 

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

        }
    };
}]);

Просмотр (html) 

<form ng-submit="submit()">
    <input type="text" ng-model="for-param">
    <input type="text" ng-model="for-param">
    <input type="text" ng-model="for-param">

    <input type="file" file-model="image01">
    <input type="file" file-model="image02">

    <button type="submit">Save</button>
</form>

Контроллер (при отправке) 

$scope.submit = function () {
    var params = {...};
    var data = {
        'frond-side-image' : $scope.image01,
        'back-side-image': $scope.image02
    };

    var formData = new $window.FormData();
    formData.append("image01", $scope.image01);
    formData.append("image02", $scope.image02);

    // Service
    $http({
        method: "POST",
        url: "api-url",
        headers: { "Content-Type": undefined },
        params: params,
        data: formData
    }).then(function (response) {
        console.log(response);
    }, function (error) {
        console.log(error);
    });
};

На основании вышеуказанной конфигурации я получаю пустой ответ, но получаю ошибку 405, которая не разрешена методом.

следующие мои заголовки запроса и полезные данные

запрос заголовка (после отправки) 

Content-Type: multipart/form-data; boundary=…--------------147472608521363

запрос полезной нагрузки 

-----------------------------1363509831949
Content-Disposition: form-data; name="image01"

stacked_circles.png
-----------------------------1363509831949
Content-Disposition: form-data; name="image01"

stacked_circles.png
-----------------------------1363509831949--

Кроме того, я также пытался сделать это с XMLHttpRequest () , и с этим я также получаю ту же ошибку 405 с пустым ответом. 

var request = new XMLHttpRequest();
request.open('POST', url);
request.setRequestHeader('Content-Type', undefined);
request.send(formData);

Ref: stackoverflow

Сейчас я собираюсь попробовать с $ ngResource и посмотреть, сможет ли он решить мою проблему.

Примечание : Этот API работает нормально в POSTMAN

Примечание : Бэкэнд в JAVA (весна)

Примечание : позже я преобразую изображениев base64 для загрузки на AWS (я просто выложу изображение / base64 в backend, чем бэкэнд загрузит его в AWS).

...