将图像上传到 Firebase 存储并同时将文本输入到 Firestore 时出错

Posted

技术标签:

【中文标题】将图像上传到 Firebase 存储并同时将文本输入到 Firestore 时出错【英文标题】:Error while uploading image to firebase storage and text input to firestore simultaneously 【发布时间】:2022-01-04 15:16:19 【问题描述】:

我希望在提交表单时,文本输入和选择的文件应分别上传到 firestore 集合和 firebase 存储。我不明白为什么它会给我错误。

这是我的表格:

<form onSubmit=postSubmitHandler>
    <input type="text" ref=postTextRef/>
    <input type="file"/>
    <button type="submit">Upload</button>
</form>

这是我的处理函数:

function postSubmitHandler(e) 
    e.preventDefault();
    const file = e.target .files[0];

    console.log(file)

    if (!file) return;
    const sotrageRef = ref(storage, `posts/$file.name`);
    const uploadTask = uploadBytesResumable(sotrageRef, file);

    uploadTask.on(
        "state_changed",
        (snapshot) => 
        const prog = Math.round(
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgress(prog);
        ,
        (error) => console.log(error),
        () => 
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => 
            console.log("File available at", downloadURL);
            firestore.collection('posts').doc(currentUser.uid).set(
                imageURL: downloadURL,
                caption: postTextRef.current.value,
                postedAt: new Date(),
                likes: 0
            )
        );
       
    ); 
  

我得到的错误是:

 TypeError: Cannot read properties of undefined (reading '0')
  47 | 
  48 |  function postSubmitHandler(e) 
  49 |    e.preventDefault();
> 50 |    const file = e.target.files[0];
  51 |  ^  

请帮助我更正此错误,或者如果有其他好的方法,请告诉我。

【问题讨论】:

【参考方案1】:

由于您的postSubmitHandler 正在响应正在提交的form,因此它的e.target 指向表单元素,而不是指向文件所在的input

快速修复:

const input = e.target.querySelector("input[type='file']");
const file = input.files[0];

此处的第一行从您的表单 (e.target) 中选择正确的输入,然后用于访问用户选择的 files

【讨论】:

非常感谢您的帮助。

以上是关于将图像上传到 Firebase 存储并同时将文本输入到 Firestore 时出错的主要内容,如果未能解决你的问题,请参考以下文章

将带有文本(已连接)的图像上传到 Firebase 存储

如何将多个图像上传到 Firebase 存储并返回多个下载 URL

如何将多个图像上传到Firebase存储并返回多个downloadURL

如何在 Laravel 中调整图像大小并同时将数据保存在数据库中

Flutter - 将图像上传到 Firebase 存储

将多个图像的异步图像上传到firebase存储