Это мой вариант использования:
У меня есть страница «Добавить» в Списки, которая позволяет пользователю создать Листинг, включающий функцию загрузки изображений.Я использую 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, чтобы он имел необходимый формат?