Javascript Node-JS服务器中的图像共享_Javascript_Node.js_Socket.io_Backend_File Handling

Javascript Node-JS服务器中的图像共享

javascript node.js socket.io

Javascript Node-JS服务器中的图像共享,javascript,node.js,socket.io,backend,file-handling,Javascript,Node.js,Socket.io,Backend,File Handling,（我是Node js的新手）我刚刚创建了一个简单的聊天服务，客户端可以向其他客户端发送图像，但是过程非常缓慢，图像的URL太长。。。这是我的代码，我正在寻找一种不同的方式将图像URL发送到服务器，然后再发送到其他客户端客户端： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <input typ

（我是Node js的新手）

我刚刚创建了一个简单的聊天服务，客户端可以向其他客户端发送图像，但是过程非常缓慢，图像的URL太长。。。这是我的代码，我正在寻找一种不同的方式将图像URL发送到服务器，然后再发送到其他客户端

客户端：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <input type="file" id="img" onchange="getImgSrc()" accept="image/*">
  <input type="submit" onclick="submitImg()">
  <div></div> <!-- OUTPUT DIV -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    
    const socket=io.connect('http://localhost:80');
    
    var imgFile,fr,src,img;

    getImgSrc = () => {
      imgFile = document.querySelector('input[type=file]').files[0];
      fr = new FileReader();
      fr.onload = () => {src = fr.result;} //Get Img Src
      fr.readAsDataURL(imgFile);
    }

    submitImg = () => {
      socket.emit('submitImg',src);
    }
    
    setImgSize = (img, width, height) => {
      img.width = width;
      img.height = height;
    }
    
    socket.on('sendImg',(src)=>{   // Create Img...
      img = document.createElement('img');
      img.src = src;
      setImgSize(img, 200, 200);
      document.querySelector('div').append(img);
    });

</script>
</body>
</html>

非常感谢您，希望您能帮助我。

无论您做什么，它都不会是即时的，但是如果您使用readAsArrayBuffer并添加100kb图像，它将发送100kb如果您使用readAsDataURL，它将发送133kb，因为base64的性质。。但是数据uri的初始部分包括mimetype，否则需要将自己作为socket.io有效负载的一部分来处理（或者做响应，需要sharp或其他库来查看数据）。如果要使用readAsArrayBuffer，则需要Blob响应并创建数据url。示例（注意它仍然很慢）另一个可能的改进是将图像绘制到屏幕外的画布，将画布图像数据导出为jpg blob，获取缓冲区，然后通过服务器发送该缓冲区。但是，在执行任何操作之前，只需在开始时发送一个socket.io事件，以便收件人可以在等待图像数据短暂到达之后显示某种加载程序。您不需要缓冲任何内容。理想情况下，您可以将图像文件作为二进制数据流传输，我不确定如何使用socket.io或是否可能。您可以在POST请求中使用

多部分/表单数据将文件发送到服务器。在服务器上，您可以将图像文件流式传输到磁盘（使用fs流式API），然后向客户端广播一个URL，他们可以将其用作
src。@LawrenceCherone谢谢，您的回答帮了我很大的忙lot@JakeHolzinger在我的情况下，我不能使用这种方法。无论你做什么，它都不会是即时的，但是如果您使用readAsArrayBuffer并添加一个100kb的图像，它将发送100kb，如果您使用readAsDataURL，它将发送133kb，因为base64的性质。。但是数据uri的初始部分包括mimetype，否则需要将自己作为socket.io有效负载的一部分来处理（或者做响应，需要sharp或其他库来查看数据）。如果要使用readAsArrayBuffer，则需要Blob响应并创建数据url。示例（注意它仍然很慢）另一个可能的改进是将图像绘制到屏幕外的画布，将画布图像数据导出为jpg blob，获取缓冲区，然后通过服务器发送该缓冲区。但是，在执行任何操作之前，只需在开始时发送一个socket.io事件，以便收件人可以在等待图像数据短暂到达之后显示某种加载程序。您不需要缓冲任何内容。理想情况下，您可以将图像文件作为二进制数据流传输，我不确定如何使用socket.io或是否可能。您可以在POST请求中使用多部分/表单数据将文件发送到服务器。在服务器上，您可以将图像文件流式传输到磁盘（使用fs流式API），然后向客户端广播一个URL，他们可以将其用作src。@LawrenceCherone谢谢，您的回答帮了我很大的忙lot@JakeHolzinger就我而言，我不能用这种方法。
const express = require('express');
const app = express();
const http = require('http').Server(app);
app.use(express.static('client'));//index.html folder
const io = require('socket.io')(http);

io.on('connection', (socket) => {
  socket.on('submitImg',(src)=>{//Client submit an image
    io.emit('sendImg',src);  //the server send the image src to all clients
  });
});

const port = 80;
http.listen(port, () => {console.log('Server Running on Port ' + port)});