我想把我上传的图片保存在firebase storage文件夹中

Question

我想把我上传的图片保存在一个名为" course-cover ";在firebase存储中这是我的代码，它将上传的图片直接保存在存储路径中但我想把它们保存在course-cover目录中文件夹

async function storeCoverCourse(coverCourse) {
return new Promise((resolve, reject) => {
const storage = getStorage();
const filename = `${coverCourse.name}-${uuidv4()}`;
const storageRef = ref(storage, filename);
const uploadTask = uploadBytesResumable(storageRef, coverCourse);
uploadTask.on(
"state_changed",
(snapshot) => {
// Observe state change events such as progress, pause, and resume
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
const progress =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log("Upload is " + progress + "% done");
switch (snapshot.state) {
case "paused":
console.log("Upload is paused");
break;
case "running":
console.log("Upload is running");
break;
}
},
(error) => {
// Handle unsuccessful uploads
reject(error);
},
() => {
// Handle successful uploads on complete
// For instance, get the download URL: https://firebasestorage.googleapis.com/...
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
resolve(downloadURL);
});
}
);
});
}
const imgUrls = await Promise.all(
[...cover].map((coverCourse) => storeCoverCourse(coverCourse))
).catch((error) => {
toast.error("image not uploaded");
return;
});
const formDataCopy = {
...formData,
imgUrls,
timestamp: serverTimestamp(),
};
delete formDataCopy.cover;
await addDoc(collection(db, "courses"), formDataCopy);

Answer 1

storageRef是一个StorageReference，您可以用它指定文件的路径。如果您的路径包含/，那么它就像一个目录。试一试:

const filename = `course-cover/${coverCourse.name}-${uuidv4()}`;
const storageRef = ref(storage, filename);

它实际上不是一个文件夹，而只是一个命名空间。有关详细信息，请参见如何在Firebase Storage中创建文件夹?

Answer 2

除了@Dharmaraj在他们的回答中提到的解决方案之外，你还应该摆脱带有Promise返回函数的Promise构造函数的有问题的使用。它可以被消除，因为uploadTask对象是一个类似于then/promise的对象。

async function storeCoverCourse(coverCourse) {
const storage = getStorage();
const filename = `course-cover/${coverCourse.name}-${uuidv4()}`;
const storageRef = ref(storage, filename);
const uploadTask = uploadBytesResumable(storageRef, coverCourse);

uploadTask.on(
"state_changed",
(snapshot) => {
// Observe state change events such as progress, pause, and resume
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
const progress =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log("Upload is " + progress + "% done");
switch (snapshot.state) {
case "paused":
console.log("Upload is paused");
break;
case "running":
console.log("Upload is running");
break;
}
}
);
return uploadTask
.then(snapshot => snapshot.ref.getDownloadURL());
}