Иногда, когда мы создаем форму с загрузкой изображения, может быть хорошей идеей предварительно просмотреть изображение перед его отправкой в серверную часть или предварительно просмотреть изображение, которое уже загружено, при открытии формы для редактирования.
В этом руководстве я научу вас, как создать простой и многоразовый компонент Alpine.js для предварительного просмотра загружаемых изображений.
Предполагается, что у вас есть базовые знания о Alpine.js.
Чтобы облегчить процесс, я буду использовать фреймворк TailwindCSS для стилизации компонента, но не волнуйтесь, я использую только несколько простых стилей и объясню соответствующий CSS, который использую при необходимости.
Запуск компонента
Предполагая, что у нас уже есть HTML-страница с установленным Alpine.js, мы можем приступить к объявлению кода компонента:
Теперь мы можем добавить шаблон компонента в наш HTML:
Приведенный выше код проверяет, заполнено ли свойство imageUrl. Если это так, он покажет тег изображения. В противном случае вместо изображения появится маленькая серая рамка.
Обратите внимание, что мы использовали класс object-cover из TailwindCSS в нашем теге изображения. Он добавляет свойство CSS object-fit: cover;, чтобы изображение не теряло пропорции и не центрировалось на предварительном просмотре.
После этого мы можем увидеть что-то подобное при запуске нашего кода:
Предварительный просмотр изображения
Теперь давайте добавим код для предварительного просмотра изображения при выборе нового файла для загрузки.
Во-первых, мы обновим ввод файла для вызова метода fileChosen при выборе файла:
<input class="mt-2" type="file" accept="image/*" @change="fileChosen">
Затем мы можем реализовать этот метод в нашем компоненте:
Самый важный метод здесь - fileDataToUrl. Он отвечает за чтение данных файла и преобразование их в URL-адрес данных (представление файла изображения в формате base64).
Итак, внутри метода fileChosen мы можем получить этот результат URL-адрес данных и сохранить его в свойстве imageUrl.
Поскольку теги изображений принимают и адреса изображений, и представления данных в формате base64, мы можем использовать этот трюк для отображения нашего изображения перед его загрузкой.
Добавление адреса изображения по умолчанию
Теперь давайте внесем небольшое изменение в наш компонент, чтобы можно было определить путь / адрес изображения по умолчанию. Это поможет нам показывать уже загруженные изображения при открытии формы редактирования.
Для этого внесем в компонент следующие изменения:
function imageViewer(src = '') { return { imageUrl: src, ... } }
Теперь мы можем передать адрес изображения вашему компоненту для инициализации с предварительно загруженным изображением:
<div x-data="imageViewer('heart.png')"> ... </div>
Заключение
С помощью этого простого и многоразового компонента Alpine.js вы можете добавить предварительный просмотр изображения в свои формы загрузки.
Я надеюсь, что этот урок будет вам полезен. Ваше здоровье!
Изначально это руководство было размещено здесь.
Следуйте за мной в Twitter, чтобы получить больше советов и руководств: @Tiago_Ferat