【问题标题】:File not being sent via socket.io文件未通过 socket.io 发送
【发布时间】:2016-01-15 14:45:16
【问题描述】:

我正在使用 angularjs、nodejs 和 socketio 进行通信。

客户端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
    });  
}

当我选择要打开的.png 文件时,上面的结果是:client: file

服务器节点:

.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 现在支持发射 Buffer(来自 Node.JS)、Blob、 ArrayBuffer 甚至 File,作为任何数据结构的一部分:

工作代码:

客户端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.');
        }
    }

服务器节点:

    .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!");
        });
    }))

【问题讨论】:

  • angular.element(this).scope().upload(this)你为什么要这样做?
  • @MartijnWelker 这是一种能够为button 设置样式并使其像表单/文件输入一样的巧妙方法。纯粹为了炫耀。例如,为 IE 设置表单文件输入样式是一件很痛苦的事情。
  • 您不应该使用FileReader 的实例来发送blob吗?
  • @maurycy 这是另一种可能的方式,但 socket.io 声明您可以发送File(如果您阅读了我链接的文档)。然而,我开始认为他们只指服务器端。用引号更新问题。
  • 函数中的file 参数不是包含数组files 和文件列表的对象吗?

标签: javascript angularjs node.js sockets socket.io


【解决方案1】:

应该是这样的(见cmets)

$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
    });  
}

【讨论】:

  • 确实你是对的。我不知道为什么我认为单个表单文件输入没有包含在数组中。塔!
  • 我认为您仍然需要创建缓冲区/blob 或 fileReader 才能将文件内容发送到 socket.io
  • 它现在实际上完美无缺(通过发送文件,而不是 blob):) 我在发送的文件上做了一个 console.log ,它确实是一个缓冲区。使用工作代码更新问题!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-06-28
  • 2012-11-14
  • 2014-09-06
  • 2013-01-29
  • 1970-01-01
  • 2023-03-13
相关资源
最近更新 更多