Загрузка изображений в Firebase из приложения VueJs - PullRequest
Новая
       10

Загрузка изображений в Firebase из приложения VueJs

0 голосов
/ 28 октября 2018

Я хочу, чтобы пользователь мог зарегистрироваться и загрузить изображение на одно и то же событие, чтобы такие данные, как имя, адрес электронной почты и т. Д., Отправлялись в хранилище, а изображение - в корзину, в настоящее время я могу реализовать эти две функции, но по отдельности, поэтому я немного застрял в том, как связать вместе данные и изображение, чтобы я мог получить их позже. Я также хочу, чтобы это было сделано с помощью Vuex. код ниже объясняет, как я отправляю данные и изображение в хранилище и хранилище соответственно из моего компонента .vue 

import { storage } from '../firebase/init.js'
import firebase from 'firebase'

export default {
  data(){
    return {
        email: '',
        password: '',
        image: null
      }
    }, 
    methods: {
      signUp(){
        firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
           .then(response => {
             let user = {
             id: response.user.id,
             email: response.user.email
           }
          //here i want to do something to link this user to the upload image event below
        })
      },
      uploadFile(e){
        const file = e.target.files[0];
        
        storage.ref('images/'+ file.name).put(file)
          .then(response => {
            console.log(response)
          })
          .catch(err => console.log(err))
      }
    }

Пожалуйста, оставьте комментарий ниже для дальнейшего разъяснения, заранее спасибо

1 Ответ

0 голосов
/ 28 октября 2018

Вам нужно получить firebase, чтобы вернуть URL-адрес изображения, а затем вставить его в качестве поля в вашей базе данных.Попробуйте что-то вроде этого: 

uploadFile(e){
    const file = e.target.files[0];
    storage.ref('images/'+ file.name).put(file)
      .then(response => {
        response.ref.getDownloadURL().then((downloadURL) => {
           firebase.database().ref(YOUR_DATABASE).child(THE_USER_ID).update({imageUrl:downloadURL})
      }                 
     .catch(err => console.log(err))
}

Это вставит URL-адрес изображения в базу данных, и вы сможете вызывать его так же, как и все пользовательские данные.

...