Как передать изображение в Firebase db?

У меня есть проблемы с Firebase Stor и Firebase DB. У меня есть input = file, и я загружаю этот файл в хранилище firebase, после того, как этот файл нужно хранить в firebase db.

index.html

<img :src="getDownloadURL">
<input type="file" multiple accept="image/*" ref="fileInput" @change="detectFiles($event.target.files)">

component.js

methods: {
detectFiles (fileList) {
  Array.from(Array(fileList.length).keys()).map(x => {
    this.upload(fileList[x])
  })
},
upload (file) {
  const userId = db.collection('users').doc().id;
  const storage = firebase.storage()
  const storageRef = storage.ref('users').child('images/' + userId + '.png')
  this.uploadTask = storageRef.put(file)
  this.uploadTask
    .then(snapshot => {
      return snapshot.ref.getDownloadURL()
      // this.downloadURL = snapshot.downloadURL
    })
    .then(downloadURL => {
      return downloadURL;
    })
    .catch(error => {
      console.log(`Failed to upload file and get link - ${error}`);
    })
}}

Arter firebese store url нужно отправить в firebese db

submitNewEdit (getDownloadURL) {
  const ref = db.collection('users').doc()
  console.log('ref', this.fileInput)
  console.log('imageUrl', this.getDownloadURL)
  ref.set({
    id: ref.id,
    name: this.name,
    description: this.description,
    image: this.getDownloadURL
  })
    .then(downloadURL => {
      // this.image = downloadURL.child('name').val();
    })
    .then(() => {
      ref.get().then(doc => {
        console.log(doc.data())
      })
    })
    .then(docRef => this.$router.push('/all-user')
    )
    .catch(err => {
      sweetalert({
        title: err,
        icon: 'error',
        confirm: '#69B4EC'
      })
    })
}

}

Ссылка на файл, который возвращается firebase store, введите здесь описание изображения

0 ответов

Другие вопросы по тегам