无法在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

当用户上传照片时，你有什么理由不直接将下载的URL保存到firestore文档中吗？然后只需通过文档获取url，而不是每次都直接从存储中获取下载url？

edit：所以你在评论中提到的方法只是给你一个文件路径。如果你想删除照片，你会用它。但是实际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!");
}  
})
},

那是可以玩的东西。