Приложение на Vue + Firebase, как лучше сделать?

Question

[Lector]

Суть такова. Изучаю Vue, в качестве обучения хочу написать простое приложение для изучения английского. То есть показывается картинка, а снизу слово на русском-английском. То есть просто показываются карточки, типа листаешь их и запоминаешь слова. Начал делать, решил сделать страницу с формой чтобы можно было добавлять сами слова и загружать к ним картинку. Проблема заключается вот в чем, не получается. Вроде все по докам fiebase делаю.

Хотелось сделать чтобы при отправке формы картинка грузилась в Firebase Storage, получать ее путь и записывать в Firebase Database к примеру : яблоко-apple-путь к картинке Firebase Storage .
Может кто поделиться примерами, а то каша в голове, ошибки непонятные в консоли постоянно меняются

Answer 1

[Farkl]

для 8 версии
в переменной picture будет хранится ссылка на загрузившуюся в сторадж картинку

<div>
    <input type="file" @change="previewImage" accept="image/*" />
</div>

 previewImage(event) {
        let q = event.target.files[0]
        const storageRef = firebase
          .storage()
          .ref('name папки из стораджа' + `${q.name}`)
          .put(q)
        storageRef.on(
          `state_changed`,
          snapshot => { },
         (error) => {
               console.log(error.message)
          },
          () => {
            storageRef.snapshot.ref.getDownloadURL().then(url => {
              this.picture.push(url)
            })
          }
        )
      },

Comments

[Lector]

Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.storage is not a function

[Farkl]

а ты как импортируешь firebase storage?

[Lector]

в файле src/firebase/index.js вот такая запись:

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore, collection } from "firebase/firestore";
const firebaseConfig = {.......};
const app = initializeApp(firebaseConfig);

const db = getFirestore(app);
const categoriesRef = collection(db, 'categories');

const storage = getStorage(app);

export default { categoriesRef, storage };

а вот на самой странице уже разные варианты пробую, уже пробую вот так:

import { categoriesRef, storage } from '@/firebase'
import { addDoc } from "firebase/firestore";
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage"

в методе пишу так:

async createCategory(у) {
			console.log('Create doc');
let file = e.target.files[0];
		this.file = file;
		let storageRef = ref(storage, 'categories/'+this.file.name);
		const uploadTask = uploadBytesResumable(storageRef, this.file);
		uploadTask.on('state_changed', (snapshot) => {console.log(snapshot);},
		(error) => {
		switch (error.code) {
		case 'storage/unauthorized':
		break;
		case 'storage/canceled':
		break;
		case 'storage/unknown':
		break;
		}
	},
	() => {
	getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
	this.imgUrl = downloadURL;
		//console.log('File available at', this.imgUrl);
	});
	});

	const addedDoc = await addDoc(categoriesRef, this.$data);
	console.log(addedDoc);
	}

[Lector]

Кажется разобрался, уже ошибок нет, все норм работает, но осталась проблема, что мне нужно сначала загрузить картинку, потом получить ее урл, и только потом уже сделать запись в базу с помощью addDoc. Я запутался с async await где нужно поставить чтобы все по порядку работало

[Farkl]

Lector, у тебя мой пример кода сработал, или ты сам написал свой вариант? просто я кинул пример для 8 версии, т.к. не знал что 9 вышла.

[Lector]

Farkl, не сработал тоже, что касается своей задачи, я подумал а почему бы не конвертировать картинку в base64 и записывать в базу. Так бы пришлось загружать картинку, получать ее url, записывать в базу, а так сразу в базу записал само изображение, не знаю правда практикуется такое или нет

[Farkl]

Lector, ну если ты загружаешь картинку в сторедж то тебе ответом возвращается ссылка на нее, которую ты и закидываешь в базу. ну лично я так делал

[Lector]

Farkl, спасибо, надо будет попробовать на досуге)