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

关于这一点，您可以使用文件名，图像将作为|出现在您的产品集上，您可以使用All_dataset[, 18] <- as.integer(Reduce(`|`, lapply(All_dataset[, 8:17], `==`, "Samuel L. Jackson")))拥有一个图像道具。

somefireurl.com/{your_file_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存储并将其添加到数据库？

2 个答案: