如何同时上传图片和发送消息（React & Firebase）？答案

【问题标题】：How to make uploading pictures and sending messages together (React & Firebase)?如何同时上传图片和发送消息（React & Firebase）？
【发布时间】：2021-03-30 07:14:09
【问题描述】：

我是 React 开发的新手。我目前想要实现的功能是允许用户发送上传的图片。该功能类似于信使上传图片，可以与文字一起发送。以下是我当前的代码：

import React, { useState } from 'react'
import "./ChatInput.css"
import { useStateValue } from './StateProvider';
import db from './firebase';
import firebase from 'firebase';
import { storage } from './firebase';

function ChatInput({channelName, channelId}) {
    const [input, setInput] = useState("");
    const [{user}] = useStateValue();
    const [image, setImage] = useState(null);
    const [imageUrl, setImageUrl] = useState("");
    const sendMessage = (e) => {
        e.preventDefault();

        if(channelId){
            db.collection('courses').doc(channelId).collection('messages').add({
            message:input,
            timestamp:firebase.firestore.FieldValue.serverTimestamp(),
            user:user.displayName,
            userImage: user.photoURL,

        });
    }
    setInput(""); 
    };

    const fileSelectedHandler = e => {
        if (e.target.files[0]) {
            setImage(e.target.files[0]);
        }
    };
    
    const fileUploadedHandler = () => {
        const uploadTask = storage.ref(`images/${image.name}`).put(image);
        uploadTask.on(
            "state_changed",
            snapshot => {},
            error => {
                console.log(error);
            },
            () => {
                storage
                    .ref("images")
                    .child(image.name)
                    .getDownloadURL()
                    .then(url => {
                        setImageUrl(url)
                    });
            }
        );
    }


    
    return (
        <div className ="chatInput">
            <form>
                <input
                value ={input}
                onChange={(e)=>setInput(e.target.value)} 
                placeholder={`Message #${channelName?.toLowerCase()}`} />
                <button type="submit" onClick={sendMessage}>SEND</button>

                
            </form>
            <input type="file" onChange={fileSelectedHandler}/>
            <button type="submit" onClick={fileUploadedHandler}>UPLOAD</button>
            <br />
            <img src={imageUrl} alt="" />
        </div>
    );
}

export default ChatInput;

因为图片存储在firebase-storage中，而用户发送的消息存储在firestore中。我不知道如何连接他们两个。希望有人能对代码提供答案和建议会更好。

【问题讨论】：

您正在使用imageUrl 正确地将文档添加到firestore，因此现在映射集合并相应地显示消息。如果你不知道怎么做，那就问我，我会放代码
@GayatriDipali，你介意把代码放在这里吗？非常感谢。

标签： reactjs firebase google-cloud-firestore firebase-storage

【解决方案1】：

通常您将文件的路径存储在存储中，或下载 URL（或两者）作为相关文档中的字段。这通常假设您先上传到存储，然后再编写文档。但您始终可以在上传完成后更新文档。

有些人还使用随机生成的文档 ID 作为存储中文件的名称，因此您始终知道如何从一个到另一个。

【讨论】：

1.下载图片网址。 2. 在 Firestore 中，为 URL 创建一个字段。 3. 在消息中显示所有内容。我说的对吗？
如果这满足您的应用程序的需求，当然。

【解决方案2】：

  const [messages, setMessages] = useState([]);
  useEffect(()=>{
        db
        .collection('courses')
        .doc(channelId)
        .collection('messages')
        .orderBy("timestamp","desc")
        .onSnapshot((snapshot)=>
           setMessages(
             snapshot.docs.map((doc)=>({
              id: doc.id,
              data: doc.data()
         }))
        )
      )
    },[]);

    return(
       {
         messages.map(({id,data:{content,user,timestamp,userImage}})=>(
           <Message  
             message={content} 
             user={user}
             id={id}
             key={id}
             createdAt={timestamp}
             senderImgSrc={userImage}
            />
           ))
         }
    )

当您将 imageUrl 存储在 firestore 中时，您不必再查看您的存储空间，因为 url 将保持不变。这就是我使用存储在 firestore 中的 url 的原因。

您可以创建自己的消息组件。

【讨论】：