尽管没有引发错误，但图像似乎没有上传到 Firebase 存储

Question

我正在构建一个社交媒体应用程序。在应用程序中，我有一个表单，允许用户将图像上传到 Firebase 存储。

图像出现在 firebase 存储的文件夹中（即附在下面），但不知何故，当我单击图像时，它会将我重定向到空白页面并出现一个弹出窗口

保存图像后，我尝试在计算机上打开它，但它显示“我们似乎不支持此文件格式。”
同样，当我尝试使用 Img 标签在我的 react 应用程序中包含指向我的 img 的 firebase 链接时，它不会出现在应用程序中，而是显示为图标。

这是我的代码 sn-p，用于使用反应挂钩将图像设置为状态：

const handleFileChange = (e) => {
    setImage(null);
    let selected = e.target.files[0];
    console.log(selected);

    if (!selected) {
      setImgError("Please select a file.");
      return;
    }

    if (!selected.type.includes("image")) {
      setImgError("Selected file must be an image.");
      return;
    }
    if (!selected.size > 100000) {
      setImgError("Image file size must be less than 100kb.");
      return;
    }

    setImgError(null);
    setImage(selected);
  };

这是我的代码 sn-p，用于将图像上传到 firebase 存储（我使用的是 firebase v9）：

const handleSubmit = async (e) => {
    e.preventDefault();
    let time = new Date().valueOf();
    const file = `images/${user.uid}/${time}/${image.name}`;
    const storageRef = ref(storage, file);
    await uploadBytes(storageRef, file).then((snapshot) => {
      getDownloadURL(snapshot.ref).then((url) =>
        addDoc(collection(db, "posts"), {
          uid: user.uid,
          caption: caption,
          post: post,
          displayName: user.displayName,
          imgURL: url,
          comments: [],
          likes: [],
        })
      );
    });
    setCaption("");
    setPost("");
    history.push("/home");
  };

编辑：我尝试按照文档上传文件 here 并进行如下更改：

const handleSubmit = async (e) => {
    e.preventDefault();
    let time = new Date().valueOf();
    const storage = getStorage();
    const file = `${image.name}`;
    const storageRef = ref(storage, `images/${user.uid}/${time}/${image.name}`);

    uploadBytes(storageRef, file).then((snapshot) => {
      console.log("Uploaded a blob or file!");
    });

我不太确定storageRef 中的第二个参数（及其格式）是什么；我假设它是我想要存储文件的位置。 对此有任何帮助/见解将不胜感激。谢谢！

Answer 1

你的 file 变量在这个 sn-p 中是错误的：

const file = `images/${user.uid}/${time}/${image.name}`;
const storageRef = ref(storage, file);
await uploadBytes(storageRef, file).then((snapshot) => {

uploadBytes 的第二个参数期望：

斑点 | Uint8Array | ArrayBuffer 要上传的数据。

但是您传递给它的是一个字符串，其中包含您希望文件在服务器上具有的路径，这不是预期的类型之一。

正如uploading files 文档中的示例所说：

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

const storage = getStorage();
const storageRef = ref(storage, 'some-child');

// 'file' comes from the Blob or File API
uploadBytes(storageRef, file).then((snapshot) => {
  console.log('Uploaded a blob or file!');
});

所以我希望你会想要传递e.target.files[0] 或类似的东西。