Загрузка AngleJS / PHP API-Backend изображений

Question

Я пытаюсь загрузить изображение в мой PHP веб-API.В почтальоне все работает нормально, если я делаю POST-запрос с ключом profilePicture и в качестве значения файла (мой API проверяет все перед обработкой) изображение сохраняется.Но теперь я хочу сделать загрузку с AngularJS, но я продолжаю получать 500 ответов.Вот мой код переднего плана: (мне нужно очистить код, я знаю, сейчас о его функциональности)

<form class="updateUserInformation"
                      ng-submit="updateProfile(userData.display_name,
                                               userData.profile_picture,
                                               account.username)"
                      flex="100" layout="row" >
                <div>
                    <input ng-model="userData.profile_picture" type="file">
                    <img src=""
                         width="150px" style="border-radius: 20px">
                </div>
                <div>

                    <md-input-container class="md-block">
                        <label>Schermnaam</label>
                        <input type="text" ng-model="userData.display_name" width="100%" required autofocus>
                    </md-input-container>
                    <div>
                        <md-button class="md-button md-primary md-raised" type="submit">Submit</md-button>
                    </div>
                </div>
                </form>

и вот мой контроллер:

controller('profileController', function($scope) {
    $scope.updateProfile = function (display_name, profile_picture, id) {

        console.log(profile_picture);

        var xhr = new XMLHttpRequest();
        var url = '';
        xhr.open('PUT', url, false);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify({displayName:display_name}));

        var xhr2 = new XMLHttpRequest();
        var url2 = '';
        xhr2.open('POST', url2, true);
        xhr2.setRequestHeader("Content-Type", "multipart/form-data");
        xhr2.send(JSON.stringify({profilePicture:profile_picture}));

        // location.reload();
    }
});

Answer 1

Для загрузки файла с помощью Ajax вы используете объект FormData

    var xhr2 = new XMLHttpRequest();
    var url2 = '';
    xhr2.open('POST', url2, true);
    var data = new FormData();
    data.append('profilePicture', profile_picture);// profile_picture is a File or a Blob
    // don't set the Content-Type header, it will be set internally(when FormData is used)
    xhr2.send(data);

FormData
Файл
Blob