С помощью этого действия вы можете загрузить фотографию или видео в свое приложение. Загруженный файл хранится на Firebase Storage или на вашем собственном сервере (с помощью API), и доступ к нему можно получить по загруженному URL. Вы можете использовать загруженный URL для немедленного отображения его содержимого или сохранить его в базе данных для последующего доступа к нему.

На этой странице вы узнаете, как настроить действие загрузки фото/видео, отобразить загруженное медиа и сохранить URL загруженного медиа.

апл 1

Необходимые условия (только для Firebase)

Для загрузки фотографий или видео в Firebase Storage необходимо, чтобы во FlutterFlow было настроено следующее:

  • Firebase должен быть подключен к вашему проекту. Следуйте инструкциям на этой странице по интеграции Firebase с FlutterFlow.
  • Аутентификация Firebase должна быть правильно настроена. Ознакомьтесь с этой страницей для настройки аутентификации.
  • Хранилище Firebase должно быть установлено и правильно настроено. Это займет всего секунду! Следуйте инструкциям на этой странице.
  • Для проекта должна быть настроена как минимум одна коллекция Firebase Collection, чтобы можно было хранить сгенерированный URL.

Добавление действия «Загрузить фото/видео

Выполните следующие шаги, чтобы добавить это действие к любому виджету.

  1. Выберите виджет (например, кнопку), на который вы хотите добавить действие.
  2. Выберите Действия на панели свойств (правое меню) и нажмите Открыть. Это откроет редактор потока действий в новом всплывающем окне. Если это первое действие, нажмите кнопку + Добавить действие. В противном случае нажмите кнопку «+» под плиткой предыдущего действия и выберите Добавить действие.
  3. Найдите и выберите действие Upload Photo/Video (в разделе Upload Media).
  4. Установите тип загрузки. Если вы еще не интегрировали Firebase, тип загрузки по умолчанию будет Local (Widget State).
  5. Используйте Media Type/Source, чтобы указать, хотите ли вы загрузить фотографию или видео, или и то, и другое с помощью этого действия.
  6. Используя выпадающий список Media Source, вы можете выбрать между Camera, Gallery и Either Camera or Gallery (эта опция вызовет нижний лист, в котором пользователь может выбрать источник медиафайлов Camera или Gallery).
  7. Если вы загружаете фотографию, вы можете задать для нее максимальную ширину и высоту с помощью свойств Max Width и Max Height соответственно. Это изменит размер изображения, сохранив соотношение сторон фотографии.
  8. Вы можете разрешить несколько изображений. Обратите внимание, что для этого Источник медиа должен быть установлен только на Галерею.
  9. Качество изображения можно регулировать с помощью ползунка или непосредственным вводом значения. Значение должно быть от 0 до 100, где 100 — исходное качество.
  10. Чтобы дать пользователям знать, что изображение все еще загружается, вы можете включить опцию Показывать полосу закуски.
  11. Если вы выбрали «Камера» или «Галерея», вам будет предложено еще несколько свойств для определения стиля Source Picker Style (оформление нижнего листа). Вы можете задать семейство шрифтов, цвет текста и цвет фона нижнего листа.
  12. На шаге 4:
    1. Если вы выбрали Firebase (в шаге 4), необходимо развернуть правила хранения.
    2. если вы выбрали Local (Состояние виджета), вы, вероятно, хотите загрузить медиа на ваш внутренний сервер через API. Для этого добавьте следующее действие как вызов API и выберите API, который будет загружать файл на ваш сервер. Обратите внимание, что тело запроса для этого API должно быть в формате Multipart. Смотрите, как настроить API для многочастного тела запроса.
  13. После того как вы загрузили медиафайл, посмотрите, как отобразить его на виджете в следующем разделе.
апл 2
апл 3

Отображение загруженных медиафайлов

Для отображения медиа на той же странице, с которой вызывается действие Upload Photo/Video Action, выполните следующие действия:

  1. Перетащите соответствующий виджет, который может отображать загруженное медиа. Например, для отображения загруженной фотографии вы можете использовать виджет Image. Аналогично для видео используйте виджет VideoPlayer.
  2. Перейдите на панель свойств, установите его Тип на Сеть и нажмите Установить из переменной.
  3. Для медиа, загруженных на Firebase, выберите Источник как Состояние виджета > URL загруженного файла.
  4. Для медиа, загруженных через API, выберите Источник как Action Outputs > [Имя переменной Action Output] (Api Response). Это должен быть ответ API, который использовался для загрузки медиафайла, и он должен содержать URL загруженного медиафайла. Чтобы получить URL из ответа API, смотрите, как использовать путь JSON.
  5. Чтобы показать изображение/видео в виде заполнителя, пока не будет загружено текущее, нажмите кнопку Установить из переменной и укажите URL-адрес изображения/видео в свойстве Значение по умолчанию.
  6. Нажмите кнопку Подтвердить.
Вы всегда должны указывать значение по умолчанию, если вы отображаете медиа на той же странице, с которой вызывается действие загрузки. В противном случае вы столкнетесь с ошибкой при запуске приложения, поскольку URL изначально пуст. Только после того, как сработает действие Upload Photo/Video Action и медиа будет сохранено в Firebase Storage, URL станет доступным.
апл 4
апл 5

Хранение URL загруженного медиафайла

Вы должны хранить URL загруженного медиа в вашей базе данных (коллекция Firebase или таблица базы данных), чтобы вы могли легко получить к нему доступ позже внутри приложения.

Сохранение URL в коллекции Firebase

Чтобы сохранить URL в коллекции Firebase:

  1. Убедитесь, что у вас есть поле, которое может хранить путь к фотографии или видео, например, photo_url (тип данных: путь к изображению) или video_url (тип данных: путь к видео).
  2. Теперь используйте действие Firebase Create/Update document для сохранения URL в поле.
При выборе источника значения вы можете установить либо состояние виджета > URL загруженного файла, либо непосредственно выбрать загруженное фото/видео.
апл 6
апл 7
апл 8

Сохранение URL через API бэкенда

Вы можете использовать свой бэкенд AP для сохранения URL, как и для любых других данных. Вот пример обновления данных через API.

Добавление BlurHash

BlurHash — это новый инновационный способ создания компактных и визуально привлекательных держателей изображений. Когда вы прокручиваете веб-страницу или мобильное приложение, вы могли заметить, что некоторые изображения загружаются дольше. Это может расстраивать и нарушать пользовательский опыт. Именно здесь на помощь приходит BlurHash — он позволяет отображать размытую версию изображения, которая выглядит так же, как оригинал, пока настоящее изображение загружается в фоновом режиме.

С помощью BlurHash вы можете создавать более визуально привлекательные и контекстуально релевантные вставки, которые лучше отражают содержание загружаемого изображения. Его можно использовать в различных контекстах, от фотогалерей и приложений для социальных сетей до электронной коммерции и новостных приложений.

Вот как выглядит загрузка изображений с помощью BlurHash:

апл 9

Ниже описаны шаги по созданию и использованию BlurHash:

  1. Сгенерировать BlurHash
  2. Сохранить BlurHash
  3. Использовать BlurHash

1. Генерирование BlurHash

Отдельного действия для создания Blurhash не существует. Вместо этого вы можете сгенерировать его с помощью действия Upload photo/video. На странице загрузки изображения воспользуйтесь этим действием и просто включите опцию Include Blur Hash. Это автоматически создаст Blurhash для загружаемого изображения.

апл 10

2. Сохранить BlurHash

Сгенерированный BlurHash доступен через меню Widget State > Uploaded Local File > Media Blur Hash. Прежде чем использовать BlurHash, рекомендуется сохранить его в той же коллекции или таблице, где вы сохранили URL изображения, для удобства доступа.

апл 11

Вот как получить доступ и сохранить BlurHash в коллекции Firebase с помощью действия create document:

апл 12

Совет: Вы также можете создать пользовательский тип данных ‘image’, а затем добавить два поля, такие как ‘image_url’ и ‘image_blurhash’, следующим образом:

апл 13

3. Используйте BlurHash

Чтобы использовать BlurHash, выберите виджет Image, перейдите на панель свойств, включите опцию Use Blur Hash, а затем установите значение Blur Hash String из переменной.

апл 14