Firebase, чтобы получить URL
Что такое Firebase?
Firebase - это платформа, которая позволяет создавать веб-приложения и мобильные приложения без языка программирования на стороне сервера. Он хранит данные пользователей в своей базе данных в реальном времени, которая синхронизирует данные между пользователями в реальном времени. Это продукт Google, который предлагает нам множество функций. Некоторые ключевые особенности Firebase:
- Хостинг Firebase
- База данных в реальном времени
- Аналитика Firebase
- Обмен сообщениями в облаке
- Хранилище Firebase
- Уведомления и т. Д.
Все эти функции делают firebase хорошим инструментом, хотя наиболее широко используемой функцией firebase, безусловно, является база данных в реальном времени, которую он предлагает. База данных реального времени Firebase - это, по сути, база данных NoSQL, размещенная в облаке, которая позволяет хранить и синхронизировать между вашими пользователями в режиме реального времени. База данных - это всего лишь один большой объект JSON, которым разработчики могут управлять в реальном времени. Синхронизация в реальном времени позволяет пользователям легко получать доступ к своим данным с любого устройства, будь то Интернет или мобильное устройство.
Получить URL изображения
Firebase может использоваться для различных целей, но в основном используется для базы данных в реальном времени, онлайн-обработки. Облачное хранилище Firebase - это наиболее часто используемая функция, используемая разработчиками. Облачное хранилище позволяет разработчикам быстро и легко загружать файлы в корзину Google Cloud Storage, предоставляемую и управляемую Firebase.
URL-адрес изображения получается путем загрузки изображения в корзину firebase, а затем он может вернуть URL-адрес, который является постоянным URL-адресом, который можно открыть где угодно. Затем пользователь может использовать этот URL-адрес для любых целей в своем приложении.
Создайте сегмент в firebase, а затем создайте папку «images» (или любое имя папки), а затем получите доступ к файлу конфигурации из firebase, который этот файл сгенерирует при создании сегмента базы данных.
Код конфигурации похож на код, показанный ниже:
var config = {
apiKey: "ВАШ КЛЮЧ",
authDomain: "ВАШ ДОМЕН",
databaseURL: "URL БАЗЫ ДАННЫХ",
projectId: "postweb-b3f18",
ведро: "ВЕДРО",
messagingSenderId: "157746640407"
};
Добавьте ниже тег скрипта перед добавлением вышеуказанного кода конфигурации
Инициализируйте облачное хранилище FireBase
firebase.initializeApp (конфигурация);
Добавьте HTML-код в свой html-код, чтобы мы могли загрузить файл
<form><progress value= "0" id= "uploader" max= "100" >0%</progress><br><br>// get the file from user<input id= "photo" class= "file" type= "file" name= "mainimage" value= "" onchange= "getfile()" ><br><br>// submit the chosen file<button id= "submit_link" type= "submit" name= "button" >Save</button></form> |
Объяснение:
Приведенный выше код представляет собой просто html-форму, которая может принимать ввод от пользователя, то есть пользователь может выбрать файл, который он хочет загрузить, и нажать кнопку сохранения. Когда пользователь выбирает файл, вызовы функции getfile () и показанная ниже функция getfile () в файле javascript может запускаться. Затем дальнейшая обработка вызовов может быть выполнена в коде javascript и возвращении URL-адреса изображения.
Добавление javascript, чтобы определенная функция в html могла работать:
<script type= "text/javascript" > var selectedFile; function getfile() { var pic = document.getElementById( "photo" ); // selected file is that file which user chosen by html form selectedFile = pic.files[0]; // make save button disabled for few seconds that has id='submit_link' document.getElementById( 'submit_link' ).setAttribute( 'disabled' , 'true' ); myfunction(); // call below written function } function myfunction() { // select unique name for everytime when image uploaded // Date.now() is function that give current timestamp var name= "123" +Date.now(); // make ref to your firebase storage and select images folder var storageRef = firebase.storage().ref( '/images/' + name); // put file to firebase var uploadTask = storageRef.put(selectedFile); // all working for progress bar that in html // to indicate image uploading... report uploadTask.on( 'state_changed' , function (snapshot){ var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; var uploader = document.getElementById( 'uploader' ); uploader.value=progress; switch (snapshot.state) { case firebase.storage.TaskState.PAUSED: console.log( 'Upload is paused' ); break ; case firebase.storage.TaskState.RUNNING: console.log( 'Upload is running' ); break ; } }, function (error) {console.log(error); }, function () { // get the uploaded image url back uploadTask.snapshot.ref.getDownloadURL().then( function (downloadURL) { // You get your url from here console.log( 'File available at' , downloadURL); // print the image url console.log(downloadURL); document.getElementById( 'submit_link' ).removeAttribute( 'disabled' ); }); }); }; </script> |
Объяснение:
Когда пользователь отправляет html-форму, вызывается функция getfile (). Эта функция просто берет файл, выбранный формой html, и отключает кнопку сохранения на несколько секунд, пока файл не будет загружен в firebase, а затем вызывает другую функцию, которая называется myfunction (). «myfunction ()» может содержать все «имя» объекта, связанного с firebase, в «myfunction» - это имя, под которым изображение хранится в базе данных. А затем некоторый код для запуска индикатора выполнения, storageRef и другого объекта, который все связан с firebase, и storageRef.put (selectedFile) помещает выбранный файл в базу данных. Затем uploadTask.snapshot.ref.getDownloadURL () возвращает нам URL-адрес и кнопку сохранения в форме html, которая снова не может загрузить другое изображение.
Файл загружается в firebase, а затем возвращает URL-адрес, который занимает 2-3 секунды, поэтому я могу использовать индикатор выполнения и отключить кнопку отправки на некоторое время. Когда файл загружен и URL-адрес сгенерирован, активна только кнопка «Отправить».