如何通过 socket.io 将图像发送到服务器？

我一直在为此绞尽脑汁，但找不到合适的解决方案。 我希望能够通过 socket.io emmit 将图像上传到服务器，并稍后将它们保存到 MongoDB 数据库。我该怎么做呢？我见过有人用 base64 编码来做这件事，但我不知道它到底是如何工作的，这个网站上还有其他问题询问如何通过 socket.io 从服务器发送图像到客户端，但没有关于这个。感谢所有帮助。

Goal:将图像上传到服务器socket.emit('image', someimagefile)或类似的。

如果您提供类似的方式将图像发送给客户，我将非常感激。

正如您提到的，您可以将图像转换为base64 using 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 => {
    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 => {
    // 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 => {
    // 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
});