Node.js 聊天应用发送图像

我正在学习网络聊天应用程序，我正在使用react js和socket发送消息，因此文本消息正在发送，但图像只发送了错误的链接，并且没有显示在框历史聊天消息中，请看：

这是input.js

import React from 'react'; 
import './Input.css';

const Input = ({ setMessage, sendMessage, message }) => (
  <form className="form">
    <input
      className="input"
      type="text"
      placeholder="Type a message..."
      value={message}
      onChange={({ target: { value } }) => setMessage(value)}
      onKeyPress={event => event.key === 'Enter' ? sendMessage(event) : null}
    />
    <div class="image-upload">
        <label for="file-input">
            <img src="https://img.icons8.com/plasticine/2x/image.png" placeholder="Send Image" alt="logo" />
        </label>

        <input 
          id="file-input" 
          type="file"
          accept="image/x-png,image/gif,image/jpeg" 
          placeholder="Send Image"
          value={message}
          onChange={({ target: { value } }) => setMessage(value)}
          onKeyPress={event => event.key === 'Enter' ? sendMessage(event) : null} 
        />
    </div>
    <button className="sendButton" onClick={e => sendMessage(e)}>Send</button>
  </form>
)

export default Input;

从“React”导入React；
导入“/Input.css”；
常量输入=（{setMessage，sendMessage，message}）=>(
设置消息（值）}
onKeyPress={event=>event.key==='Enter'？发送消息（事件）：null}
/>
设置消息（值）}
onKeyPress={event=>event.key==='Enter'？发送消息（事件）：null}
/>
sendMessage（e）}>Send
)
导出默认输入；

chat.js

import React, { useState, useEffect } from "react";
import queryString from 'query-string';
import io from "socket.io-client";

import TextContainer from '../TextContainer/TextContainer';
import Messages from '../Messages/Messages';
import InfoBar from '../InfoBar/InfoBar';
import Input from '../Input/Input';

import './Chat.css';

const ENDPOINT = 'http://localhost:5000/';

let socket;

const Chat = ({ location }) => {
  const [name, setName] = useState('');
  const [room, setRoom] = useState('');
  const [users, setUsers] = useState('');
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const { name, room } = queryString.parse(location.search);

    socket = io(ENDPOINT);

    setRoom(room);
    setName(name)

    socket.emit('join', { name, room }, (error) => {
      if(error) {
        alert(error);
      }
    });
  }, [ENDPOINT, location.search]);
  
  useEffect(() => {
    socket.on('message', message => {
      setMessages(messages => [ ...messages, message ]);
    });
    
    socket.on("roomData", ({ users }) => {
      setUsers(users);
    });
}, []);

  const sendMessage = (event) => {
    event.preventDefault();

    if(message) {
      socket.emit('sendMessage', message, () => setMessage(''));
    }
  }

  return (
    <div className="outerContainer">
      <div className="container">
          <InfoBar room={room} />
          <Messages messages={messages} name={name} />
          <Input message={message} setMessage={setMessage} sendMessage={sendMessage} />
      </div>
      <TextContainer users={users}/>
    </div>
  );
}

export default Chat;

import React，{useState，useffect}来自“React”；
从“查询字符串”导入查询字符串；
从“socket.io客户端”导入io；
从“../TextContainer/TextContainer”导入TextContainer；
从“../Messages/Messages”导入消息；
从“../InfoBar/InfoBar”导入InfoBar；
从“../Input/Input”导入输入；
导入“./Chat.css”；
常数端点http://localhost:5000/';
让插座；
常量聊天=（{location}）=>{
const[name，setName]=useState（“”）；
常数[房间，设置室]=使用状态（“”）；
const[users，setUsers]=useState（“”）；
const[message，setMessage]=useState（“”）；
const[messages，setMessages]=useState（[]）；
useffect（（）=>{
const{name，room}=queryString.parse（location.search）；
套接字=io（端点）；
休息室；
集合名（名称）
emit（'join'，{name，room}，（错误）=>{
如果（错误）{
警报（错误）；
}
});
}，[ENDPOINT，location.search]）；
useffect（（）=>{
socket.on（'message'，message=>{
设置消息（消息=>[…消息，消息]）；
});
socket.on（“roomData”，（{users}）=>{
设置用户（用户）；
});
}, []);
const sendMessage=（事件）=>{
event.preventDefault（）；
如果（信息）{
emit（'sendMessage'，message，（）=>setMessage（''）；
}
}
返回(
);
}
导出默认聊天；

mesages.js

import React from 'react';

import ScrollToBottom from 'react-scroll-to-bottom';

import Message from './Message/Message';

import './Messages.css';

const Messages = ({ messages, name }) => (
  <ScrollToBottom className="messages">
    {messages.map((message, i) => <div key={i}><Message message={message} name={name}/></div>)}
  </ScrollToBottom>
);

export default Messages;

从“React”导入React；
从“反应滚动至底部”导入滚动至底部；
从“./Message/Message”导入消息；
导入“./Messages.css”；
常量消息=（{Messages，name}）=>(
{messages.map（（message，i）=>）}
);
导出默认消息；

和message.js

import React from 'react';

import './Message.css';

import ReactEmoji from 'react-emoji';

const Message = ({ message: { text, user }, name }) => {
  let isSentByCurrentUser = false;

  const trimmedName = name.trim().toLowerCase();

  if(user === trimmedName) {
    isSentByCurrentUser = true;
  }

  return (
    isSentByCurrentUser
      ? (
        <div className="messageContainer justifyEnd">
          <p className="sentText pr-10">{trimmedName}</p>
          <div className="messageBox backgroundBlue">
            <p className="messageText colorWhite">{ReactEmoji.emojify(text)}</p>
          </div>
        </div>
        )
        : (
          <div className="messageContainer justifyStart">
            <div className="messageBox backgroundLight">
              <p className="messageText colorDark">{ReactEmoji.emojify(text)}</p>
            </div>
            <p className="sentText pl-10 ">{user}</p>
          </div>
        )
  );
}

export default Message;

从“React”导入React；
导入“./Message.css”；
从“react表情符号”导入react表情符号；
const Message=（{Message:{text，user}，name}）=>{
让isSentByCurrentUser=false；
const trimmedName=name.trim（）.toLowerCase（）；
如果（用户===trimmedName）{
isSentByCurrentUser=true；
}
返回(
IsEntByCurrentUser
? (
{trimmedName}
{ReactEmoji.emojify（text）}
)
: (
{ReactEmoji.emojify（text）}
{user}
)
);
}
导出默认消息；

在这里，我选择了

C:\Users\Gerso\Downloads

看，链接不是

C:\Users\Gerso\Downloads

因此，当我将图像发送给另一个用户时，如下所示：

---

所以你可以看到图像没有显示，为什么？？url图像也错了

对于fakepath的东西，看看这个