文件没有通过socket.io发送

我正在使用angularjs，nodejs和socketio进行通信。文件没有通过socket.io发送

客户端HTML：

<div style='height: 0px;width: 0px; overflow:hidden;'> 
    <input id="avatarInput" type="file" value="upload" onchange="angular.element(this).scope().upload(this)" /> 
</div> 
<button data-ng-click="avatarButton()">Upload image</button>

客户端JS：

$scope.avatarButton = function() { 
    document.getElementById('avatarInput').click(); 
} 
$scope.upload = function (file) { 
    console.log('client: ' + file.type); 
    socket.emit('image', { 
     file: file 
    }); 
}

上述结果输出：client: file当我选择一个.png要打开的文件。

服务器的NodeJS：

.on('image', function (data) { 
    console.log('server: ' + data.file.type); 
})

上述结果在输出：server: undefined。

我猜这个文件没有通过socket.io发送到服务器。我在这里看不到错误。更多的文档在这里：http://socket.io/blog/introducing-socket-io-1-0/#binary

从文档报价：

Socket.IO现在支持发射缓冲器（来自Node.js的），斑点， ArrayBuffer甚至文件，因为任何数据结构的一部分：

工作代码：

客户端HTML：

<div style='height: 0px;width: 0px; overflow:hidden;'> 
    <input id="avatarInput" type="file" value="upload" onchange="angular.element(this).scope().upload(this.files)" /> 
</div> 
<button data-ng-click="avatarButton()">Upload image</button>

客户端JS：

$scope.avatarButton = function() { 
     document.getElementById('avatarInput').click(); 
    } 
    $scope.upload = function (files) { 
     if (window.File && window.FileReader && window.FileList && window.Blob) { 
      socket.emit('uploadAvatar', { 
       file: files[0] 
      }); 
     } else { 
      alert('The File APIs are not fully supported in this browser.'); 
     } 
    }

服务器的NodeJS：

.on('uploadAvatar', co.wrap(function* (data) { 
     console.log(data.file); // spits out buffer 
     var fs = require('fs'); 
     fs.writeFile(__dirname + '/public/avatar/myFile.png', data.file, { 
      flag: "w" 
     }, function (err) { 
      if (err) 
       return console.log(err); 
      console.log("The file was saved!"); 
     }); 
    }))

来源

2016-01-15 Karl Morrison

'angular.element（本）.scope（）.upload（this）'你为什么这样做？ –

@MartijnWelker这是一种巧妙的方式，可以设置“按钮”的样式，并使其像表单/文件输入一样。纯粹为了演出。例如，为IE设计样式文件输入是一件痛苦的事情。 –

不应该使用'FileReader'的实例来发送blob吗？ – maurycy

它应该是这样的（见注释）

$scope.upload = function (element) { //element is an input[file] 
    console.log('client: ' + element.files); //a FileList object that can be send 
    socket.emit('image', { 
     file: element.files //or element.files[0] depending of what you want to achieve 
    }); 
}

来源

2016-01-15 15:00:47 maurycy

确实你是对的。我不知道为什么我认为单个表单文件输入没有被封装在一个数组中。 TA！ –

我认为你仍然必须创建缓冲区/ blob或fileReader来发送文件的内容到socket.io – maurycy

它现在实际上完美地工作（通过发送文件，而不是blob）:)我做了一个console.log文件发送并且足够真实，这是一个缓冲区出来。用工作代码更新了问题！ –

文件没有通过socket.io发送

回答

相关问题