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

Posted 2023-02-22

【中文标题】如何将图像上传到 Firebase 存储并将其添加到数据库中？

【英文标题】：How can I upload an image to firebase storage and add it to the database?

【发布时间】：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)
      
  

【参考方案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]