我正在用socket.io创建一个聊天应用程序，我需要知道，如何在“聊天室”中以用户身份向其他用户广播图像，而不需要首先将图片保存在目录中。主要目标是从“文件输入”打开图像，并能够将文件（“图片”）发送给其他用户，以便他们可以在聊天中查看它

顺晟科技：

基本上，使用fileReader将文件作为缓冲区加载，然后发送。接收图像时，将其blob放入createobjecturl并创建图像标记。

基本示例(查看沙箱)

<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>

<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>