无法在firebase + vue中检索用户详细信息和图像

Posted 2023-02-22

【中文标题】无法在firebase + vue中检索用户详细信息和图像

【英文标题】：Cannot retrieve user details and image in firebase + vue

【发布时间】：2022-01-22 04:13:59

【问题描述】：

美好的一天。 拜托，我需要以下关于我的 vue + firebase 代码的帮助。我可以成功上传用户详细信息和图像，但我很难在我的 vue 组件上显示图像。这些值在 Devtools 中返回为未定义。请帮帮我...

  methods: 
  async storeCourse() 
            try 
                this.isLoading = false
                // upload file
                const fileRef = 'uploads/courses/' + this.file.name
                const snapshot = await storage.ref(fileRef).put(this.file)
                let data = 
                    userId: auth.currentUser.uid,
                    subject: this.subject,
                    description: this.description,
                    tutor: this.tutor,
                    payment: this.payment,
                    duration: this.duration,
                    amount: this.amount,
                    years_exp: this.years_exp,
                    image: fileRef
                
                window.alert('Added!')
                const docRef = coursesCollection.doc(); 
                data.id = docRef.id; 
                const doc = await docRef.set(data);
                // const doc = await coursesCollection.add(data)
                this.$emit('course:added', data)
                await this.resetForm()
                this.isLoading = false
                this.dialog = false
             catch(e) 
                console.log(e)
            
        ,
async getUser() 
            try 
                // const querySnapshot = await coursesCollection.where('userId', '==', auth.currentUser.uid).get()
                const querySnapshot = await usersCollection.where('userId', '==', auth.currentUser.uid).get()
                querySnapshot.forEach( async (doc) => 
                    let img = ''
                    if(doc.data().id_upload) 
                        img = await storage.ref().child(doc.data().id_upload).getDownloadURL()
                    
                    this.profile.push(
                        id_upload: img,
                        img: doc.data().id_upload
                    )
                )
             catch(e) 
                console.log(e)
            
        ,
,
 async mounted() 
        await this.getGames()
                await this.getUser()

    

我正在尝试通过以下方式访问数据：

<h1>Hi, profile.name </h1>
        
         <v-img :src="profile.id_upload"></v-img>

我已将我的 getUser() 更改为下面的代码，它说记录未找到，而记录正常存在。

 async getUser() 
            let ref = usersCollection.where('userId', '==', auth.currentUser.uid).get()
            .then(snapshot =>   //DocSnapshot
                if (snapshot.exists) 
                    let profile = snapshot.data()
                 else 
                    // snapshot.data() will be undefined in this case
                    console.log("No such document!");
                  
            )
        ,

请问我哪里漏掉了？

【参考方案1】：

当用户上传照片时，您是否有任何理由不直接将 downloadURL 保存到 firestore 文档？那么只需通过文档获取 url，而不是尝试直接从存储中获取 downloadURL？

编辑：所以你在评论中提到的方法只是给你文件路径。如果您想删除照片，您将使用它。但实际的 URL 是不同的值。

我会附上我用来上传到 Firebase 存储的代码，希望你可以从那里玩弄它并获得一些工作。我个人不使用 Vue2（从 VUE3 开始），因此代码可能需要对您进行一些调整。或修改可组合为您工作。希望对您有所帮助。

 // my composable code

import  projectStorage  from "../firebase/config";
import  ref  from "vue";

const useStorage = () => 
  const error = ref(null);
  const imageUrl = ref(null);
  const imagefilePath = ref(null);

  const uploadImage = async (file) => 
    imagefilePath.value = 'uploads/courses/' + this.file.name';
    const storageRef = projectStorage.ref(imagefilePath.value);

    try 
      const res = await storageRef.put(file);
      ImageUrl.value = await res.ref.getDownloadURL();
     catch (err) 
      console.log(err.message);
      error.value = err.message;
    
  ;

  return  imageUrl, imagefilePath, error, uploadImage ;
;





//your code modified 

 async storeCourse() 
            try 
                this.isLoading = false
                // upload file
                
                let data = 
                    userId: auth.currentUser.uid,
                    subject: this.subject,
                    description: this.description,
                    tutor: this.tutor,
                    payment: this.payment,
                    duration: this.duration,
                    amount: this.amount,
                    years_exp: this.years_exp,
                    imagePath: this.imagefilePath,     
                    image: this.imageUrl, 
                
                window.alert('Added!')
                const docRef = coursesCollection.doc(); 
                data.id = docRef.id; 
                const doc = await docRef.set(data);
                // const doc = await coursesCollection.add(data)
                this.$emit('course:added', data)
                await this.resetForm()
                this.isLoading = false
                this.dialog = false
             catch(e) 
                console.log(e)
            
        ,

【讨论】：

感谢您回答@Strid3r21。我是 vue + firebase 的新手。在这种情况下，文档中的图像字段值保存为 uploads/courses/xyz.jpg。这是我知道的存储它们的方式。你能指导我更好的方法吗？我已经更新了我的问题以反映我的商店方法。

我用一个代码示例编辑了我的回复，希望能让你朝着正确的方向前进。

我仍在努力获取用户详细信息。我似乎无法理解它。

【参考方案2】：

您的代码可能在某些地方出现故障。

 async getUser() 
        let ref = usersCollection.where('userId', '==', auth.currentUser.uid).get()  //<-- are you sure auth.currentUser.uid returns a single string variable?
        .then(snapshot =>   //DocSnapshot
            if (snapshot.data())   //<-- change to this.
                let profile = ...snapshot.data(), id: snapshot.id //<--and change to this
             else 
                // snapshot.data() will be undefined in this case
                console.log("No such document!");
              
        )
    ,

这是可以玩的东西。