如何將Firebase上傳圖像的圖像下載URL轉換為base64

Question

我正在嘗試在Vue.js Firebase應用程序中實現圖像上傳器組件。 我將上傳器設置為首先使用.put()將圖像放入Firebase存儲中。 然后使用.getDownloadURL()檢索.getDownloadURL() ，然后將其保存到數據庫中以便在整個應用程序中呈現： this.imageUrl = downloadURL 。 上傳多個圖像后，我注意到數據庫中存儲的某些圖像的downloadURL顯示為base64字符串，而其他圖像的downloadURL顯示為以https://firebasestorage.googleapis.com/...開頭的常規URL https://firebasestorage.googleapis.com/... 。 我希望downloadURL作為一個或另一個在數據庫中一致顯示。 哪種格式更適合存儲在數據庫中？ 我如何設置下面的代碼以一致地解釋一個或另一個？ 我的代碼如下。 謝謝！

        var storageRef = firebase.storage().ref()
        var mountainsRef = storageRef.child(`images/${this.imageName}`)
        mountainsRef.put(this.imageFile).then(snapshot => {
          snapshot.ref.getDownloadURL().then(downloadURL => {
            this.imageUrl = downloadURL
          })
        })

全部成分

<template>
  <div class="sign-up">
    <v-container fluid fill-height>
     <v-layout align-center justify-center>
       <v-flex xs12 sm8 md4>
         <v-card class="elevation-8">
           <v-toolbar dark color="primary">
             <v-toolbar-title>Let's create a new account!</v-toolbar-title>
           </v-toolbar>
           <v-card-text>
             <v-form>
               <v-text-field prepend-icon="person" v-model="email" name="email" label="Email" type="text"></v-text-field>
               <v-text-field prepend-icon="lock" v-model="password" name="password" label="Password" id="password" type="password"></v-text-field>
               <v-text-field prepend-icon="lock" v-model="name" name="name" label="Name" id="name" type="text"></v-text-field>

               <v-layout align-center justify-center>
                 <v-flex xs12 sm8 md4>
                   <img :src="imageUrl" height="150" v-if="imageUrl" />
                   <v-text-field label="Select Image" @click="pickFile" v-model="imageName"></v-text-field>
                   <input type="file" style="display: none" ref="image" accept="image/*" @change="onFilePicked"/>
                 </v-flex>
               </v-layout>

             </v-form>
           </v-card-text>
           <v-card-actions>
             <v-container>
               <v-btn @click="signUp" color="info">Sign Up</v-btn>
             </v-container>
           </v-card-actions>
         </v-card>
         <v-card-text>Return to <router-link to="/login"><strong>login</strong></router-link>.</v-card-text>
       </v-flex>
     </v-layout>
   </v-container>
  </div>
</template>

<script>
import slugify from 'slugify'
import firebase from 'firebase'
import db from '@/firebase/init'
export default {
  name: 'signUp',
  data () {
    return {
      email: '',
      password: '',
      name: '',
      slug: null,
      imageName: null,
      imageUrl: '',
      downloadUrl: '',
      imageFile: null
    }
  },
  methods: {
    signUp () {
      if (this.name && this.email && this.password) {
        this.slug = slugify(this.name, {
          replacement: '-',
          remove: /[$*_+~,()'"!\-:@]/g,
          lower: true
        })
        // UPLOAD
        var storageRef = firebase.storage().ref()
        var mountainsRef = storageRef.child(`images/${this.imageName}`)
        mountainsRef.put(this.imageFile).then(snapshot => {
          snapshot.ref.getDownloadURL().then(downloadURL => {
            this.imageUrl = downloadURL
          })
        })
        // end UPLOAD
        let ref = db.collection('users').doc(this.slug)
        ref.get().then(doc => {
          if (doc.exists) {
            this.feedback = 'This alias already exists'
          } else {
            firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
              .then(cred => {
                ref.set({
                  name: this.name,
                  email: this.email,
                  user_id: cred.user.uid,
                  imageUrl: this.imageUrl,
                  downloadUrl: this.downloadUrl
                })
              }).then(() => {
                this.$router.push({ name: 'Dashboard' })
              })
              .catch(err => {
                this.feedback = err.message
              })
            this.feedback = 'This alias is free to use'
          }
        })
      } else {
        this.feedback = 'You must enter all fields'
      }
    },
    pickFile () {
      this.$refs.image.click()
    },
    onFilePicked (e) {
      const files = e.target.files
      if (files[0] !== undefined) {
        this.imageName = files[0].name
        if (this.imageName.lastIndexOf('.') <= 0) {
          return
        }
        const fr = new FileReader()
        fr.readAsDataURL(files[0])
        fr.addEventListener('load', () => {
          this.imageUrl = fr.result
          this.imageFile = files[0]
        })
      } else {
        this.imageName = ''
        this.imageFile = ''
        this.imageUrl = ''
      }
    }
  }
}
</script>

Answer 1

之所以“數據庫中存儲的某些圖像的downloadURL顯示為base64字符串，而其他圖像的downloadURL顯示為常規URL”，是因為在准備好上載部件之前將imageUrl設置為用戶。最終保存了this.imageUrl ，它最初設置為FileReader .result 。

相反，你應該等到你正確downloadURL從firebase.storage只有then設置你的用戶imageUrl 。

var storageRef = firebase.storage().ref()
var mountainsRef = storageRef.child(`images/${this.imageName}`)
    mountainsRef.put(this.imageFile).then(snapshot => {
    snapshot.ref.getDownloadURL().then(downloadURL => {
       this.imageUrl = downloadURL

       let ref = db.collection('users').doc(this.slug)
        ref.get().then(doc => {
          if (doc.exists) {
            this.feedback = 'This alias already exists'
          } else {
            firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
              .then(cred => {
                ref.set({
                  name: this.name,
                  email: this.email,
                  user_id: cred.user.uid,
                  imageUrl: this.imageUrl,
                  downloadUrl: this.downloadUrl
                })
              }).then(() => {
                this.$router.push({ name: 'Dashboard' })
              })
              .catch(err => {
                this.feedback = err.message
              })
            this.feedback = 'This alias is free to use'
          }
        })
    })
})