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

Question

美好的一天。 拜托，我需要以下关于我的 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!");
                }  
            })
        },

请问我哪里漏掉了？

Answer 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)
            }
        },

Answer 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!");
            }  
        })
    },

这是可以玩的东西。