React上传图片至Firestore遇阻：如何获取图片完整路径？

我在React中尝试上传图片到Firebase存储时遇到了问题，查阅文档后还是没搞定。以下是我的相关代码：

初始化状态 #

const [image, setImage] = useState([]);

文件输入组件 #

<input type="file" id="image" accept="image/*" className="hidden" onChange={(e) => onChangeImage(e)}/>

状态更新函数 #

const onChangeImage = (e) => {
    setImage([...image, e.target.files[0]]);
    console.log(e.target.files);
};

监听状态变化的useEffect #

useEffect(() => {
    console.log("picture: ", image);
}, [image]);

控制台打印的File对象信息：

lastModified: 1664394000377
lastModifiedDate: Wed Sep 28 2022 22:40:00 GMT+0300 (Eastern European Summer Time) {}
name: "landscape.jpg"
size: 112285
type: "image/jpeg"
webkitRelativePath: ""
[[Prototype]]: File

我看到Firebase文档里说要创建图片引用和完整路径，但找不到获取本地图片完整路径的方法。想问下有没有办法获取这个路径，或者其他上传图片到Firebase存储的可行方法？

解决方法 #

首先明确：浏览器出于安全限制，无法获取本地文件的完整路径。Firebase存储上传不需要本地路径，直接使用你拿到的File对象即可完成上传。

1. 初始化Firebase存储 #

确保项目已初始化Firebase，引入存储模块：

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

// 初始化存储实例
const storage = getStorage();

2. 编写上传函数 #

利用状态中的File对象创建存储引用，执行上传操作：

const uploadImage = async () => {
  if (image.length === 0) return;
  
  // 遍历选中的图片（因状态用数组存储，故循环处理）
  for (const file of image) {
    // 自定义存储路径，示例：`images/${Date.now()}-${file.name}`（用时间戳避免文件名重复）
    const storageRef = ref(storage, `images/${Date.now()}-${file.name}`);
    
    try {
      // 上传文件到Firebase存储
      await uploadBytes(storageRef, file);
      console.log("文件上传成功");
      
      // 若需要获取上传后的可访问URL，调用getDownloadURL
      const downloadURL = await getDownloadURL(storageRef);
      console.log("文件访问URL：", downloadURL);
      // 可将此URL存入Firestore数据库，用于后续展示或关联数据
    } catch (error) {
      console.error("上传失败：", error);
    }
  }
};

3. 触发上传操作 #

给按钮绑定上传函数，触发上传：

<button onClick={uploadImage}>上传图片</button>

关键注意事项 #

• 存储路径自定义：建议用时间戳+文件名的组合，避免同名文件覆盖问题。
• 存储规则配置：开发阶段可临时设置宽松规则（允许读写），上线后需调整为严格规则（如仅允许认证用户上传）：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

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