Я бился головой об этом, и я не могу найти правильное решение. Я хочу иметь возможность загружать изображения на сервер через socket.io emit и позже сохранять их в базе данных MongoDB. Как мне это сделать? Я видел людей, которые делают это с кодировкой base64, но я не могу понять, как именно это работает, на этом сайте есть другие вопросы, спрашивающие об отправке изображения клиенту с сервера через socket.io, но ни один об этом. Вся помощь приветствуется. {amp}lt;3

Цель: загрузить изображение на сервер с помощью socket.emit('image', someimagefile) или аналогичным.

Буду очень признателен, если вы предоставите аналогичный способ отправки изображения клиенту.

Как вы упомянули, вы можете преобразовать изображение в base64 с помощью FileReader.readAsDataURL и отправить закодированную строку и декодировать ее на сервере:

 document.getElementById('file').addEventListener('change', function() { const reader = new FileReader(); reader.onload = function() { const base64 = this.result.replace(/.*base64,/, ''); socket.emit('image', base64); }; reader.readAsDataURL(this.files[0]); }, false); 
 socket.on('image', async image ={amp}gt; { const buffer = Buffer.from(image, 'base64'); await fs.writeFile('/tmp/image', buffer).catch(console.error); // fs.promises }); 

Или лучше использовать FileReader.readAsArrayBuffer чтобы получить массив байтов, которые вы отправите на сервер.

 document.getElementById('file').addEventListener('change', function() { const reader = new FileReader(); reader.onload = function() { const bytes = new Uint8Array(this.result); socket.emit('image', bytes); }; reader.readAsArrayBuffer(this.files[0]); }, false); 
 socket.on('image', async image ={amp}gt; { // image is an array of bytes const buffer = Buffer.from(image); await fs.writeFile('/tmp/image', buffer).catch(console.error); // fs.promises }); 

Чтобы получить от сервера:

 // Server side socket.emit('image', image.toString('base64')); // image should be a buffer 
 // Client side socket.on('image', image ={amp}gt; { // create image with const img = new Image(); // change image type to whatever you use, or detect it in the backend // and send it if you support multiple extensions img.src = `data:image/jpg;base64,${image}`; // Insert it into the DOM });