Vue.js 3结合Firebase 9实现图片上传至指定文件夹并保留原文件名

直接修改存储引用的路径，将文件夹名与原文件名拼接即可实现需求，正确代码如下：

uploadImage(e) {
  const file = e.target.files[0];
  if (!file) return; // 避免无文件时执行后续逻辑
  const storage = getStorage();
  // 拼接文件夹路径与原文件名，生成完整的存储引用路径
  const storageRef = ref(storage, `products/${file.name}`);
  uploadBytes(storageRef, file)
    .then(() => {
      console.log('图片上传成功');
    })
    .catch((error) => {
      console.error('上传失败:', error);
    });
}

原代码问题说明 #

• 第一种写法仅指定products/作为存储路径，这指向的是products文件夹本身，而非文件夹内的具体文件，Firebase会默认使用占位名称（如你遇到的'product'）将文件存到根目录。
• 第二种写法直接使用file.name作为路径，没有包含文件夹前缀，自然会将文件上传至根目录。

核心逻辑是通过模板字符串products/${file.name}生成完整的目标路径，既指定了目标文件夹，又保留了原文件名。

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