如何在Firebase实现租房广告图片上传？解决Firestore存储错误

错误原因 #

你调用setDoc()时的报错，是因为Firestore不支持直接存储File对象，它只能存字符串、数字、布尔值、数组、对象等基础类型，以及Firebase特定的类型（比如Timestamp）。要实现图片存储，得先把图片上传到Firebase Storage，然后把图片的下载URL存在Firestore文档里。

具体修改步骤 #

1. 导入Firebase Storage相关工具
   在组件文件顶部，导入Storage的核心方法：

import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";

2. 初始化Storage引用
   在组件内部创建Storage实例的引用：

const storage = getStorage();

3. 修改提交函数submitHandler
   先把选中的图片上传到Storage，拿到下载URL后，再把URL和其他房屋信息一起存入Firestore：

const submitHandler = async (e) => {
  e.preventDefault();
  if (!file) {
    alert("请选择一张图片");
    return;
  }
  try {
    // 创建Storage文件引用，用房屋标题+文件名避免重名覆盖
    const storageRef = ref(storage, `house-images/${enteredTitle}-${file.name}`);
    // 上传文件到Storage
    await uploadBytes(storageRef, file);
    // 获取图片的公开下载URL
    const imgUrl = await getDownloadURL(storageRef);
    // 把URL和其他信息存入Firestore
    await setDoc(doc(housesRef, enteredTitle), {
      title: enteredTitle,
      descr: enteredText,
      lat: enteredLatitude,
      lon: enteredLongitude,
      img: imgUrl, // 存URL而非File对象
    });
    togglePopup();
    // 清空表单状态
    setEnteredTitle("");
    setEnteredText("");
    setEnteredLatitude("");
    setEnteredLongitude("");
    setFile(null);
  } catch (err) {
    alert(err.message);
  }
};

4. 优化文件选择（可选）
   给文件输入框添加图片类型限制，避免用户选错文件：

<input type="file" accept="image/*" onChange={handleChange} />

修改后的完整组件代码 #

import { useState } from "react";
import { collection, doc, setDoc } from "firebase/firestore";
import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
import { db } from "./firebase-config"; // 替换成你的Firebase配置文件路径

const Header = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [enteredTitle, setEnteredTitle] = useState("");
  const [enteredText, setEnteredText] = useState("");
  const [enteredLatitude, setEnteredLatitude] = useState("");
  const [enteredLongitude, setEnteredLongitude] = useState("");
  const [file, setFile] = useState(null);
  const housesRef = collection(db, "map-markers");
  const storage = getStorage();

  const togglePopup = () => {
    setIsOpen(!isOpen);
  };

  const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
  };
  const textChangeHandler = (event) => {
    setEnteredText(event.target.value);
  };
  const latitudeChangeHandler = (event) => {
    setEnteredLatitude(event.target.value);
  };
  const longitudeChangeHandler = (event) => {
    setEnteredLongitude(event.target.value);
  };

  const handleChange = (event) => {
    setFile(event.target.files[0]);
  };

  const submitHandler = async (e) => {
    e.preventDefault();
    if (!file) {
      alert("请选择一张图片");
      return;
    }
    try {
      const storageRef = ref(storage, `house-images/${enteredTitle}-${file.name}`);
      await uploadBytes(storageRef, file);
      const imgUrl = await getDownloadURL(storageRef);
      await setDoc(doc(housesRef, enteredTitle), {
        title: enteredTitle,
        descr: enteredText,
        lat: enteredLatitude,
        lon: enteredLongitude,
        img: imgUrl,
      });
      togglePopup();
      setEnteredTitle("");
      setEnteredText("");
      setEnteredLatitude("");
      setEnteredLongitude("");
      setFile(null);
    } catch (err) {
      alert(err.message);
    }
  };

  return (
    <div className="header">
      <div className="header-content">
        <div className="header-input">
          <input
            className="add-adv"
            type="button"
            value="Add advertisement"
            onClick={togglePopup}
          />
          {isOpen && (
            <AddAdvertisement
              content={
                <>
                  <input
                    type="text"
                    placeholder="Enter title"
                    value={enteredTitle}
                    onChange={titleChangeHandler}
                  />
                  <textarea
                    placeholder="Enter description"
                    value={enteredText}
                    onChange={textChangeHandler}
                  />
                  <input
                    type="text"
                    placeholder="Enter latitude"
                    value={enteredLatitude}
                    onChange={latitudeChangeHandler}
                  />
                  <input
                    type="text"
                    placeholder="Enter longitude"
                    value={enteredLongitude}
                    onChange={longitudeChangeHandler}
                  />
                  <input type="file" accept="image/*" onChange={handleChange} />
                  <input type="submit" value="Add" onClick={submitHandler} />
                </>
              }
              handleClose={togglePopup}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default Header;

页面显示图片的方法 #

当从Firestore获取到房屋数据后，直接用img字段的URL作为图片标签的src属性即可：

<img src={houseData.img} alt={houseData.title} />

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