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

Posted 2023-03-22

【中文标题】尽管没有引发错误，但图像似乎没有上传到 Firebase 存储

【英文标题】：Image does not seem to be uploaded to Firebase storage although no error is thrown

【发布时间】：2022-01-09 22:23:43

【问题描述】：

我正在构建一个社交媒体应用程序。在应用程序中，我有一个表单，允许用户将图像上传到 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 中的第二个参数（及其格式）是什么；我假设它是我想要存储文件的位置。 对此有任何帮助/见解将不胜感激。谢谢！

【参考方案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] 或类似的东西。

【讨论】：

嗨弗兰克，非常感谢您的回复。我刚刚尝试了上述方法，但似乎我仍然面临同样的问题 - 尽管它们出现在那里，但我无法打开 firebase 存储中的文件。我猜我仍然在传递一些不正确的东西作为storageRef 中的参数。我可以澄清一下“一些孩子”的论点应该是什么吗？我已经编辑了帖子，我使用的代码 sn-p 在“编辑”部分下。谢谢。

编辑中的代码仍然做同样类型的事情，const file = `$image.name` 。您传入的file uploadBytes(storageRef, file) 需要是对用户在浏览器中选择的文件的引用，而不是您构造的字符串。

非常感谢弗兰克！在进行了您建议的更改并更改了我的 Firebase 设置后，我设法使其工作:)

很高兴听到@Kalamazoo。不要忘记点击我的答案左侧的赞成/接受按钮。