如何修改代码将上传图片存入Firebase Storage的course-cover文件夹？

要将图片存储到Firebase Storage的course-cover文件夹，只需调整存储引用的路径参数即可，以下是修改后的完整代码：

async function storeCoverCourse(coverCourse) {
  return new Promise((resolve, reject) => {
    const storage = getStorage();
    const filename = `${coverCourse.name}-${uuidv4()}`;
    // 关键修改：在文件名前添加文件夹路径
    const storageRef = ref(storage, `course-cover/${filename}`);
    const uploadTask = uploadBytesResumable(storageRef, coverCourse);
    uploadTask.on(
      "state_changed",
      (snapshot) => {
        // 监听上传状态变化：进度、暂停、继续
        const progress =
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log("上传进度：" + progress + "%");
        switch (snapshot.state) {
          case "paused":
            console.log("上传已暂停");
            break;
          case "running":
            console.log("上传中");
            break;
        }
      },
      (error) => {
        // 处理上传失败
        reject(error);
      },
      () => {
        // 上传完成后获取下载链接
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
          resolve(downloadURL);
        });
      }
    );
  });
}

const imgUrls = await Promise.all(
  [...cover].map((coverCourse) => storeCoverCourse(coverCourse))
).catch((error) => {
  toast.error("图片上传失败");
  return;
});

const formDataCopy = {
  ...formData,
  imgUrls,
  timestamp: serverTimestamp(),
};
delete formDataCopy.cover;
await addDoc(collection(db, "courses"), formDataCopy);

修改说明 #

核心改动是创建存储引用的代码：

• 原代码：const storageRef = ref(storage, filename);
• 修改后：const storageRef = ref(storage, course-cover/${filename});

通过在文件名前拼接course-cover/，Firebase Storage会自动创建该文件夹（如果不存在），并将文件存储到这个目录下，而不是根路径。

内容的提问来源于stack exchange，提问作者imen