时间戳

首页 > 解决方案 > 如何通过 socket.io 将图像发送到服务器？

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

问题描述

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

目标：将图像上传到服务器socket.emit('image', someimagefile)或类似服务器。

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

标签： javascripthtmlnode.jssocket.io

解决方案

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

推荐阅读