如何将 blob 上传到 firebase 存储？

Question

我正在使用 next.js 13 和 firebase v9。 我正在使用拖放区上传图片。 dropzone 返回一个带有 blob 的数组，因为它是 src。

[
  {
    id: 1
    name: "image_processing20220628-4591-yzir35.png"
    src: "blob:http://localhost:3000/6e2f33e5-a749-4e9a-b502-d20b8e3f38ca"
  }
 ...
]

上面的数组是从拖放区返回的。 当我尝试上传到 firebase 存储时，它会抛出错误。

FirebaseError: Firebase Storage: Object 'livingImages/blob:http:/localhost:3000/ca0e3eaf-dbe9-4d77-8053-f4b6d1bd8600' does not exist. (storage/object-not-found)

那么我如何将图像的 blob 上传到 firebase 存储？

 const imgURL = [];

 //this is the images stored inside Redux
 const images = useSelector(selectImages); 

  const storage = getStorage();
  images.map(async (file) => {
    const storageRef = ref(storage, `livingImages/${file.src}`);
    await getDownloadURL(storageRef).then((url) => {
      imgURL.push(url);
    });
  });

 const createDocument = () => {
    const docRef = doc(db, "livingPosts", session?.user?.email);
    const colRef = collection(docRef, "posts");
    addDoc(colRef, {
      name: "test upload",
      images: imgURL,
    });
  };

拖放区代码

const dispatch = useDispatch();

  const images = useSelector(selectImages);
  const [files, setFiles] = useState(images == [] ? [] : images);

const {getRootProps, getInputProps} = useDropzone({
onDrop: (acceptedFiles) => {
     acceptedFiles.map((file, index) => {
        const reader = new FileReader();

        reader.onload = async function (e) {
          const options = {
            maxSizeMB: 5,
            maxWidthOrHeight: 1920,
            useWebWorker: true,
          };
          const compressedFile = await imageCompression(file, options);

          const tot = parseInt(acceptedFiles.length) + parseInt(files.length);
          if (tot > 9) {
            alert("select maximum of 9 images");
          } else if (parseInt(acceptedFiles.length) > 9) {
            alert("maximum images to be selected is 9");
          } else if (parseInt(files.length) < 9) {
            setFiles((prevState) => [
              ...prevState,
              {
                id: index,
                src: URL.createObjectURL(compressedFile),
                name: file.name,
              },
            ]);

            files.map((filename) => {
              acceptedFiles.forEach((newFile) => {
                if (newFile.name == filename.name) {
                  alert("a duplicate image is detected");

                  setFiles(
                    files,
                    files.filter((val) => val !== newFile)
                  );
                }
              });
            });
          } else {
            alert("something went wrong");
          }
        };
        reader.readAsDataURL(file);
        return file;
      });
    },
})

dropzone 的 output 是

Answer 1

如评论中所述，您需要实际的文件或Blob object 来上传文件，而不是 object URL。您可以在 state 中设置 blob，如下所示：

setFiles((prevState) => [
  ...prevState,
  {
    id: index,
    src: URL.createObjectURL(compressedFile),
    blob: compressedFile, // <-- add blob
    name: file.name,
  },
]);

然后上传文件并在 Firestore 文档中存储下载 URL，尝试以下 function：

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

const uploadFiles = async () => {
  console.log(files);
  const promises = files.map((file) => {
    const storageRef = ref(storage, `images/${file.name}`);
    return uploadBytes(storageRef, file.blob);
  });

  // upload all files
  const res = await Promise.all(promises);

  // get download URLs
  const links = await Promise.all(res.map((r) => getDownloadURL(r.ref)));
  console.log({ links })

  // Add Firestore document
  const colRef = collection(db, "livingPosts", session?.user?.email, "posts")
  const docRef = await addDoc(colRef, {
    name: "test",
    images: links,
  });
  console.log("Document written with ID: ", docRef.id);
};

当您想要开始上传时，您可以在单击提交按钮或任何事件时调用此 function。