Reactjs 如何将上传图片和发送消息结合在一起（React&Firebase）？

我是一个新来的反应发展。我目前想要实现的功能是允许用户发送上传的图片。此功能类似于messenger上传图片，可以与文本一起发送。 以下是我当前的代码：

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;

import React，{useState}来自“React”
导入“/ChatInput.css”
从“/StateProvider”导入{useStateValue}；
从“/firebase”导入数据库；
从“firebase”导入firebase；
从“./firebase”导入{storage}；
函数输入（{channelName，channelId}）{
const[input，setInput]=useState（“”）；
const[{user}]=useStateValue（）；
const[image，setImage]=useState（null）；
const[imageUrl，setImageUrl]=useState（“”）；
const sendMessage=（e）=>{
e、 预防默认值（）；
if（channelId）{
db.collection（'courses'）.doc（channelId）.collection（'messages'）.add({
信息：输入，
时间戳：firebase.firestore.FieldValue.serverTimestamp（），
用户：user.displayName，
userImage:user.photoURL，
});
}
设置输入（“”）；
};
const fileSelectedHandler=e=>{
if（e.target.files[0]）{
setImage（e.target.files[0]）；
}
};
const fileUploadedHandler=（）=>{
const uploadTask=storage.ref（`images/${image.name}`）.put（image）；
上传任务(
“状态已更改”，
快照=>{}，
错误=>{
console.log（错误）；
},
() => {
存储
.ref（“图像”）
.child（image.name）
.getDownloadURL（）
。然后（url=>{
setImageUrl（url）
});
}
);
}
返回(
setInput（e.target.value）}
占位符={`Message}${channelName？.toLowerCase（）}`}/>
发送
上传


);
}
导出默认输入；

---

因为图片存储在firebase存储器中，而用户发送的消息存储在firestore中。我不知道如何把他们俩联系起来。我希望有人能就代码提供更好的答案和建议。

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

---

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

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

  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}
            />
           ))
         }
    )

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

const[messages，setMessages]=useState（[]）；
  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}
            />
           ))
         }
    )


useffect（（）=>{
分贝
.收藏（‘课程’）
.doc（channelId）
.collection（'消息'）
.orderBy（“时间戳”、“描述”）
.onSnapshot（（快照）=>
设置消息(
snapshot.docs.map（（doc）=>({
id:doc.id，
数据：doc.data（）
}))
)
)
},[]);
返回(
{
messages.map（{id，数据：{content，user，timestamp，userImage}}）=>(
))
}
)

当您在firestore中存储

imageUrl

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

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

const[messages，setMessages]=useState（[]）；
useffect（（）=>{
分贝
.收藏（‘课程’）
.doc（channelId）
.collection（'消息'）
.orderBy（“时间戳”、“描述”）
.onSnapshot（（快照）=>
设置消息(
snapshot.docs.map（（doc）=>({
id:doc.id，
数据：doc.data（）
}))
)
)
},[]);
返回(
{
messages.map（{id，数据：{content，user，timestamp，userImage}}）=>(
))
}
)

当您在firestore中存储

imageUrl

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

---

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

您正在使用

imageUrl

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

imageUrl

将文档添加到firestore，因此现在可以映射整个集合并相应地显示消息。如果你不知道怎么做，那么问我我会把code@GayatriDipali，请你把代码放在这里好吗。非常感谢。下载图像URL。2.在firestore中，为URL创建字段。3.在消息中显示所有内容。我说的对吗？如果这符合你的应用程序的需要，当然可以。1。下载图像URL。2.在firestore中，为URL创建字段。3.在消息中显示所有内容。我说的对吗？如果这符合你的应用程序的需要，当然可以。