无法上传文件至Firebase：控制台提示成功但Firestore无图片

核心概念澄清 #

图片是上传到Firebase Storage（文件存储服务），而非Firestore（文档型数据库）。Firestore用于存储结构化数据（比如图片的下载URL），不会直接存储图片文件本身。你看到控制台提示上传成功但Firestore里没图片，是混淆了两个服务的用途。

代码中的错误及修复 #

1. 未初始化Firebase Storage实例 #

代码中直接使用storage变量，但没有通过getStorage()创建服务实例，导致上传逻辑无法关联到你的Firebase项目。

修复：
在导入模块后添加实例初始化代码：

const storage = getStorage(); // 初始化Storage服务实例
const db = getFirestore(); // 初始化Firestore服务实例（若需存储图片URL则添加）

2. Storage引用路径错误 #

ref(storage, "image/")仅指向一个文件夹，上传文件时必须指定具体文件名，否则无法生成有效的文件对象。

修复：
用选中文件的名称作为存储路径的一部分：

const fileName = e.target.files[0];
const storageRef = ref(storage, `image/${fileName.name}`); // 拼接文件名，确保文件能被正确识别

3. uploadBytes参数错误 #

uploadBytes要求第二个参数是单个File/Blob对象，但你传入的是e.target.files（FileList集合），这会导致上传的内容无效。

修复：
传入选中的单个文件对象：

uploadBytes(storageRef, fileName).then((snapshot) => {
    // 后续成功逻辑
});

4. 未将图片URL存入Firestore（可选需求） #

如果希望在Firestore中记录图片的访问链接，需要在上传成功后调用getDownloadURL获取URL，再写入Firestore。

添加示例逻辑：

uploadBytes(storageRef, fileName).then(async (snapshot) => {
    alert("上传成功");
    console.log('Uploaded a blob or file!');
    // 获取图片下载URL
    const downloadURL = await getDownloadURL(snapshot.ref);
    // 将URL写入Firestore示例（需替换为你的集合和文档ID）
    await setDoc(doc(db, "books", "your-book-id"), {
        imageUrl: downloadURL,
        uploadTime: new Date()
    });
    console.log("图片URL已存入Firestore");
});

完整修复后的代码 #

HTML部分（无修改） #

<input type="file" name="bookImage" id="bookImage">

JavaScript部分 #

import { getFirestore, doc, setDoc } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js";
import { getStorage, ref, uploadBytes, getDownloadURL } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-storage.js"

// 初始化Firebase服务实例
const storage = getStorage();
const db = getFirestore();

document.getElementById("bookImage").addEventListener("change", async function uploadImage(e) {
    try {
        const fileName = e.target.files[0];
        if (!fileName) return; // 防止未选择文件的情况
        
        const storageRef = ref(storage, `image/${fileName.name}`);
       
        const snapshot = await uploadBytes(storageRef, fileName);
        alert("上传成功");
        console.log('Uploaded a blob or file!');

        // 可选：将图片URL存入Firestore
        const downloadURL = await getDownloadURL(snapshot.ref);
        await setDoc(doc(db, "books", "sample-book"), {
            imageUrl: downloadURL,
            uploadTime: new Date()
        });
        console.log("图片URL已保存到Firestore");
    } catch (error) {
        console.error("上传失败：", error);
        alert("上传失败：" + error.message);
    }
})

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