如何将图像上传到 Firebase 存储并将其添加到数据库中？答案

【问题标题】：How can I upload an image to firebase storage and add it to the database?如何将图像上传到 Firebase 存储并将其添加到数据库中？
【发布时间】：2019-10-18 08:39:42
【问题描述】：

我是 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)
    }  
  }
}

【问题讨论】：

标签： firebase vue.js google-cloud-firestore firebase-storage image-uploading

【解决方案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，这取决于你的用例，但想法是一样的。希望对你有帮助

【讨论】：

嗨，谢谢你帮助我。但我得到 productRef.set(..) 不是一个奇怪的函数
我可以看看db 的样子吗？它应该类似于const db = admin.firestore()，其中 admin 是您的 firebase 实例
我有以下内容： import firebase from 'firebase' import 'firebase/firestore' import firebaseConfig from './firebaseConfig' import 'firebase/storage' const fb = firebase.initializeApp(firebaseConfig) const db = firebase.firestore();导出 {fb, db}
起来！我错过了 doc id，你让 firebase 为你设置 doc id，你在这里有几个选项，更改集以添加，甚至更好，请参阅我的更新示例
嗨，很抱歉反应迟了。 return productRef.add(payload, {merge: true}) 当我这样做时，我收到一个错误 CollectionReference.add() 需要 1 个参数，但是用 2 个参数调用。

【解决方案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]
}

}

【讨论】：