如何将 Firebase 上传图片的图片下载 URL 转换为 base64

Question

我正在尝试在 Vue.js Firebase 应用程序中实现图像上传器组件。我将上传器设置为首先使用 .put() 将图像放入 Firebase 存储中。然后使用.getDownloadURL() 检索downloadURL，然后将其保存到数据库中以便在整个应用程序中呈现：this.imageUrl = downloadURL。上传几张图片后，我注意到存储在数据库中的一些图片的 downloadURL 显示为 base64 字符串，而其他图片的 downloadURL 显示为以https://firebasestorage.googleapis.com/... 开头的常规 URL。我希望 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

“存储在数据库中的某些图像的下载 URL 显示为 base64 字符串，而其他图像的下载 URL 显示为常规 URL”的原因是因为您在上传部分之前将 imageUrl 设置为您的用户准备好了..所以你最终保存了this.imageUrl，它最初设置为FileReader.result。

相反，您应该等到从firebase.storage 获得正确的downloadURL，并且只有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'
          }
        })
    })
})