Как я могу загрузить изображение в хранилище Firebase и добавить его в базу данных?

Question

Я новичок в Vuejs. Я хочу иметь форму, с помощью которой вы можете добавлять продукты. Изображение продукта отправляется в хранилище Firebase, но как мне связать это изображение с точным продуктом в базе данных?

Я уже настроил свою форму и создал два метода. saveProduct () для сохранения продуктов в базе данных и onFilePicked () для прослушивания изменений в поле ввода и назначения изображения и загрузки его в хранилище.

import { fb, db } from '../firebaseinit'
export default {
  name: 'addProduct',
  data () {
    return {
      product_id: null,
      name: null,
      desc: null,
      category: null,
      brand: null,
      image: null,
    }
  }, 
  methods: {
    saveProduct () {
      db.collection('products').add({
        product_id: this.product_id,
        name: this.name,
        desc: this.desc,
        category: this.category,
        brand: this.brand
      })
      .then(docRef => {
        this.$router.push('/fsbo/produkten')    
      })

    },
    onFilePicked (event) {
      let imageFile = event.target.files[0]
      let storageRef = fb.storage().ref('products/' + imageFile.name)
      storageRef.put(imageFile)
    }  
  }
}

Answer 1

что об этом, вы можете использовать имя файла, ваши изображения будут отображаться как somefireurl.com/{your_file_name} в вашей коллекции продуктов, вы можете иметь изображение с imageFile.name.

 methods: {
    saveProduct (image = null) {
      let productRef = db.collection('products').doc(this.product_id)
      const payload = {
        product_id: this.product_id,
        name: this.name,
        desc: this.desc,
        category: this.category,
        brand: this.brand
      }
      if (image) payload['image'] = image
      return productRef
      .set(payload, {merge: true})
      .then(docRef => {
        this.$router.push('/fsbo/produkten')    
      })

    },
    onFilePicked (event) {
      let imageFile = event.target.files[0]
      let storageRef = fb.storage().ref('products/' + imageFile.name)
      storageRef.put(imageFile)
      return this.saveProduct(imageFile.name)
    }  
  }

Этодолжно быть достаточно, чтобы вы начали, возможно, вы хотите попробовать другую комбинацию, или, может быть, вы не хотите называть saveProduct так, как я его установил, это зависит от вашего варианта использования, но идея та же.Надеюсь, это поможет вам

Answer 2

Я исправил это сам. Вот мое решение. Я не знаю, технически ли это правильно, но это работает для моего варианта использования.

methods: {
saveProduct () {
  let imageFile
  let imageFileName
  let ext 
  let imageUrl
  let key
  let task
  db.collection('products').add({
    product_id: this.product_id,
    name: this.name,
    desc: this.desc,
    category: this.category,
    brand: this.brand
  })
  .then(docRef => {
    key = docRef.id
    this.$router.push('/fsbo/produkten')
    return key    
  })
  .then(key => {
    if(this.image !== null) {
      this.onFilePicked
      imageFile = this.image
      imageFileName = imageFile.name
      ext = imageFileName.slice(imageFileName.lastIndexOf('.'))
    }
    let storageRef = fb.storage().ref('products/' + key + '.' + ext)
    let uploadTask = storageRef.put(imageFile)
    uploadTask.on('state_changed', (snapshot) => {}, (error) => {
      // Handle unsuccessful uploads
    }, () => {
      uploadTask.snapshot.ref.getDownloadURL().then( (downloadURL) => {
        db.collection('products').doc(key).update({ imageUrl: downloadURL})
      });
    });     
  })    
},
onFilePicked (event) {
  return this.image = event.target.files[0]
}  

}