Estoy creando una aplicación de chat con socket.io, necesito saber cómo puedo transmitir imágenes como usuario a otros usuarios en la "sala de chat" sin la necesidad de guardar primero la imagen en un directorio. El objetivo principal es abrir la imagen desde una "entrada de archivo" y poder enviar el archivo ('imagen') a otros usuarios para que puedan verlo en el chat.
Fundamentalmente, use FileReader para cargar el archivo como un búfer y luego envíelo. Al recibir una imagen, coloque su blob en createObjectURL y cree una etiqueta de imagen.
Ejemplo básico ( Ver Sandbox )
<input type="file" id="img" onchange="setImgSrc(this)" accept="image/*" /> <input type="submit" onclick="submitImg()" /> <div></div> <!-- OUTPUT DIV --> <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect() var src var setImgSrc = (elm) => { var fr = new FileReader() fr.onload = () => (src = fr.result) fr.readAsArrayBuffer(elm.files[0]) } var submitImg = () => socket.emit('submitImg', src) socket.on('sentImg', (src) => { // Create Img... var img = document.createElement('img') img.src = (window.URL || window.webkitURL).createObjectURL( new Blob([src], { type: 'image/png' }) ) img.width = 200 img.height = 200 document.querySelector('div').append(img) }) </script> const express = require('express') const app = express() const http = require('http').Server(app) app.use(express.static('src/client')) const io = require('socket.io')(http) io.on('connection', (socket) => { console.log('Client connected') socket.on('submitImg', (src) => { console.log('Client sent image') //Client submit an image io.emit('sentImg', src) //the server send the image src to all clients }) }) const port = 8080 http.listen(port, () => { console.log('Server Running on Port ' + port) })