如何将图像上传到 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.[=13= 的图片道具]

 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]
}

}

如何将图像上传到 firebase 存储并将其添加到数据库？

How can I upload an image to firebase storage and add it to the database?

image-uploading

firebase

vue.js

firebase-storage

google-cloud-firestore