Загрузить изображение Angular.js при изменении действия - PullRequest
0 голосов
/ 20 сентября 2019

Это мой вариант использования:

У меня есть страница «Добавить» в Списки, которая позволяет пользователю создать Листинг, включающий функцию загрузки изображений.Я использую Angular 1.x на клиентской стороне PHP.Загрузка изображения - это функция перетаскивания с предварительным просмотром изображения.Действие 'add' работает отлично.

Ключом к функциональности является использование класса HTML5 FileReader:

function pushImagesForUpload(files) {

    function setupReader(file) {

        var counter = i;
        var reader = new FileReader();
        reader.onload = function(e) {
            if(!$scope.listing.default_image && counter == 0) {
                $scope.listing.default_image = counter; // keep track of the default_image
            }
            // get file content
            files[counter].preview = e.target.result;
            $scope.$apply();
        }
        reader.readAsDataURL(file);
        $scope.listing.listing_images.push(files[i]);
    }

    for (var i = 0; i < files.length; i++) {
        setupReader(files[i]);
    }
    console.log($scope.listing.listing_images);
}

Как уже упоминалось, это прекрасно работает, и я доволен функциональностью.

Тем не менее, я застрял на том, как обрабатывать действие редактирования 'Listing'.После предварительного заполнения формы данными списков, которые нужно отредактировать, я выполняю предварительный просмотр сохраненных изображений.Конечно, пользователь может захотеть удалить изображение, добавить новое изображение или ничего не делать.В любом случае мне нужно POST-объект к фону, который отражает новое состояние изображений.

Например, допустим, действие «edit» загружает 3 изображения в предварительном просмотре.Одно изображение должно быть удалено, другое добавлено.

  • Новое изображение обрабатывается так же, как при загрузке в действии «добавить»
  • Изображение, которое нужно просто удалитьдолжен быть опущен из объекта, выдвинутого на задний план

Проблема в том, как мне обработать 3-е изображение, которое нужно оставить в покое?Он должен быть частью объекта данных, отправленного на сервер, но как его можно обработать методом readAsDataURL, чтобы он имел необходимый формат?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...