通过套接字IO发送图像，图像未被发送

Question

我有一个聊天应用程序，我们可以匿名聊天。我正在尝试添加发送图像的功能。我不明白为什么我的代码不起作用有人可以看看它并帮助我纠正我所犯的错误。

＆＃13;

＆＃13;

var app = require('express')();          
                                         
var http = require('http').Server(app);
                                             											
var io =require ('socket.io')(http);

var path = require('path');
var people = {};

//Initialize appication with path of the application
app.get('/', function(req, res){
  var express=require('express');
  app.use(express.static(path.join(__dirname)));
  res.sendFile(path.join(__dirname, '../Chat', 'index.html'));
});

// Socket Connection Events
io.on('connection', function(socket){
  socket.on('Chat Message', function(from, msg){
    io.emit('Chat Message', from, msg);
  });
  socket.on('user image', function (from,msg) {
        //Received an image: broadcast to all
        socket.broadcast.emit('user image', from, msg);
    });
  socket.on('UserNotification', function(user){
    io.emit('UserNotification', user);
  });
   socket.on('add user', function(user){
    socket.userName=user;
  });
  socket.on('disconnect', function (user) {
io.emit('User left', {user:socket.userName});console.log(socket.userName);
});
  
  
});

 
// Listen application request on port 3000
http.listen(3000, function(){
  console.log('listening on ***:3000');
});

＆＃13;

＆＃13;

＆＃13;

chat.js：

＆＃13;

＆＃13;

var socket = io();
$(document).ready(function(){
  var name = generateID();
  $('#user').val(name);
  socket.emit('Chat Message', 'System_User','<b>' + name + '</b> has joined the discussion');
  socket.emit('add user', name);
   });
   
$('#imagefile').bind('change', function(e){
      var data = e.originalEvent.target.files[0];
      var reader = new FileReader();
      reader.onload = function(evt){
        image('me', evt.target.result);
        socket.emit('user image', evt.target.result);
      };
      reader.readAsDataURL(data);
      
    });
	
	socket.on('user image', image);

function image (from, base64Image) {
    $('#messages').append('<li><b style="color:' + color + '">' + from + '</b>: ' + '<img src="' + base64Image + '"/>' + '</li>');
}

function generateID() {
  var nameID = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
  for( var j=0; j < 5; j++ ) {
    nameID += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return nameID;
}
function submitFunc(){
  var from = $('#user').val();
  var message = $('#m').val();
  if(message != '') {
  socket.emit('Chat Message', from, message);
}
$('#m').val('').focus();
  return false;
}
 
function showTyping() {
  var user = $('#user').val();
  socket.emit('UserNotification', user);
}
 
socket.on('Chat Message', function(from, msg){
  var me = $('#user').val();
  var color = (from == me) ? 'red' : 'violet';
  var from = (from == me) ? 'Me' : from;
  $('#messages').append('<li><b style="color:' + color + '">' + from + '</b>: ' + msg + '</li>');
});
 
socket.on('UserNotification', function(user){
  var me = $('#user').val();
  if(user != me) {
    $('#UserNotification').text(user + ' is typing ...');
  }
  setTimeout(function(){ $('#UserNotification').text(''); }, 10000);;
});

socket.on('User left', function(user){


$('#UserNotification').text(user.user + ' is disconnected');

});

＆＃13;

＆＃13;

＆＃13;

的style.css：

＆＃13;

＆＃13;

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 16px Papyrus, ComicSans; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 70%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form #button { color:#F5FBEF; background: #2E2EFE; border: none; padding: 10px;  width: 9%; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(even) { background: #F3F781; }
#UserNotification{ position: fixed; bottom: 42px; width: 100%; }
#twitterFeed { position:relative;
left:80px;
    width:33.333%;
    height:800px;
   float:right; }
   
  div.filebutton {
  line-height: 24px;
  margin: -7px 0;
  overflow: hidden;
  padding: 2px 0;
  position: relative;
  width: 150px !important;
}

.filebutton input#imagefile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
}

＆＃13;

＆＃13;

＆＃13;

的index.html：

＆＃13;

＆＃13;

<html>
   <head>
    <title>Chat App - Random ID Generation</title>
    <link rel='stylesheet' href='style.css' type='text/css'/>
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="chat.js"></script>
	<script>
	!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    </script> 
 </head>
  <body>
  <div id ="ChatContainer">
    <ul id="messages"></ul>
    <span id="UserNotification"></span>
    <form id="form" action="" onsubmit="return submitFunc();" >
      <input type="hidden" id="user" value="" /><input id="m" autocomplete="off" onkeyup="showTyping();" placeholder="Type your message here.." /><input type="submit" id="button" value="Send"/>
		
	</form>
	<div id = "twitterFeed">
	<section>
			<a class="twitter-timeline" href="https://twitter.com/jitesh_y" data-widget-id="671505342530998272">Tweets by @jitesh_y</a>

    </section>
	</div>
	</div>
  </body>
</html>

＆＃13;

＆＃13;

＆＃13;