Firebase Storage批量上传图片报错：storage/invalid-root-operation

错误原因 #

你遇到的storage/invalid-root-operation错误，核心问题有两个：

1. 存储引用路径错误：直接将图片数组setupImages传给ref()的第二个参数，会创建指向存储根目录的无效引用，而uploadBytes不允许在根引用上执行上传操作。
2. 批量上传方式错误：Firebase Storage没有直接接收图片数组的批量上传API，必须遍历数组逐个处理每个图片文件。

解决方案 #

遍历图片数组，为每个图片生成独立的非根存储路径，逐个上传后收集下载URL，最后将数据写入Firebase数据库。

完整代码示例 #

import { getStorage, ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import { addDoc, collection } from 'firebase/firestore';
import { db } from '$lib/firebase'; // 替换为你的Firebase数据库引用路径

// 处理表单提交的函数
async function handleFormSubmit(formData) {
  const { title, description, setupImages } = formData;
  const storage = getStorage();
  const imageDownloadUrls = [];

  // 遍历图片数组，逐个上传
  for (const imageFile of setupImages) {
    // 生成唯一存储路径：目录+时间戳+原文件名，避免重名覆盖
    const uniqueFileName = `${Date.now()}-${imageFile.name}`;
    const storageRef = ref(storage, `form-submissions/${uniqueFileName}`);

    // 上传当前图片文件
    const uploadSnapshot = await uploadBytes(storageRef, imageFile);
    // 获取该图片的永久下载URL
    const downloadUrl = await getDownloadURL(uploadSnapshot.ref);
    imageDownloadUrls.push(downloadUrl);
  }

  // 将表单数据和图片URL数组写入Firebase数据库
  await addDoc(collection(db, 'form-entries'), {
    title,
    description,
    images: imageDownloadUrls,
    createdAt: new Date()
  });
}

关键要点说明 #

• 非根存储路径：必须为每个图片指定具体的存储目录（比如form-submissions/）和文件名，不能直接使用根目录。
• 避免文件重名：通过Date.now()生成时间戳拼接原文件名，确保每个文件的存储路径唯一，防止覆盖已有文件。
• 并发上传优化：若需要提升上传速度，可使用Promise.all()实现并发上传：

  // 并发上传版本
  const uploadPromises = setupImages.map(async (imageFile) => {
    const uniqueFileName = `${Date.now()}-${imageFile.name}`;
    const storageRef = ref(storage, `form-submissions/${uniqueFileName}`);
    const snapshot = await uploadBytes(storageRef, imageFile);
    return getDownloadURL(snapshot.ref);
  });
  const imageDownloadUrls = await Promise.all(uploadPromises);
  

• 数据一致性：等所有图片上传完成并获取URL后，再写入数据库，避免出现部分图片未上传成功但数据已写入的情况。

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