Question

我对Firebase Stor和Firebase数据库有问题。我已输入= file并将此文件上载到firebase db中后，将其上传到firebase中。

index.html

<img :src="getDownloadURL">
<input type="file" multiple accept="image/*" ref="fileInput" @change="detectFiles($event.target.files)">

component.js

methods: {
detectFiles (fileList) {
  Array.from(Array(fileList.length).keys()).map(x => {
    this.upload(fileList[x])
  })
},
upload (file) {
  const userId = db.collection('users').doc().id;
  const storage = firebase.storage()
  const storageRef = storage.ref('users').child('images/' + userId + '.png')
  this.uploadTask = storageRef.put(file)
  this.uploadTask
    .then(snapshot => {
      return snapshot.ref.getDownloadURL()
      // this.downloadURL = snapshot.downloadURL
    })
    .then(downloadURL => {
      return downloadURL;
    })
    .catch(error => {
      console.log(`Failed to upload file and get link - ${error}`);
    })
}}

Arter firebese商店网址需要发送到firebese数据库中

submitNewEdit (getDownloadURL) {
  const ref = db.collection('users').doc()
  console.log('ref', this.fileInput)
  console.log('imageUrl', this.getDownloadURL)
  ref.set({
    id: ref.id,
    name: this.name,
    description: this.description,
    image: this.getDownloadURL
  })
    .then(downloadURL => {
      // this.image = downloadURL.child('name').val();
    })
    .then(() => {
      ref.get().then(doc => {
        console.log(doc.data())
      })
    })
    .then(docRef => this.$router.push('/all-user')
    )
    .catch(err => {
      sweetalert({
        title: err,
        icon: 'error',
        confirm: '#69B4EC'
      })
    })
}

}

指向返回的Firebase存储文件的链接 enter image description here

如何在Firebase数据库中传达网址图片？

0 个答案: