2

我尝试使用 express.js 和 socket.io 将图像保存到 node.js 的指定目录，但它不起作用。

在客户端：

var reader = new FileReader();
function drop(e) {
    e.stopPropagation();
    e.preventDefault();

    var dt      = e.dataTransfer;
    var files   = dt.files;
    jQuery.each(files, function(){

        reader.onload = function(e) {
            socket.emit('sendfile', e.target.result);
        };
    });
    return false;
}

图片应通过拖放功能上传。

然后在服务器端：

io.sockets.on('connection', function (socket) {
[...]
    socket.on('sendfile', function (data) {
        var fs = require('fs');
        app.use(express.bodyParser({ keepExtensions: true, uploadDir: '/uploaded' }));

        io.sockets.emit('updatechat', socket.username, data); //test
    });

我也试过

socket.on('sendfile', function (data) {
        var fs = require('fs');
        fs.writeFile('/uploaded/test.png', data, "binary" , function (err) {
          if (err) throw err;
          console.log('It\'s saved!');
        });
        io.sockets.emit('updatechat', socket.username, data); //data test
    });

但它没有保存任何东西。“数据测试”告诉我，数据已经到达服务器，所以我不认为问题来自客户端，但在服务器端我不知道我做错了什么

4

2 回答 2

8

我做了一个简单的例子来说明通过socket上传文件的用法！

以下步骤是：

  1. 创建send-file socket.io 事件以接收 app.js 上的文件。收到的这个文件是一个二进制文件；
  2. 在jade/HTML 页面中放置一个输入文件和一个发送它的按钮。注意：您不必使用 multipart 来发送包含多部分内容的帖子，我们发送的是套接字文件而不是 TCP 请求/响应；
  3. 初始化 HTML5 File API 支持并让监听器准备好监视您的文件输入组件；
  4. 其余的例程读取文件并将其内容转发。

现在第一步（app.js）：

var io = require('socket.io').listen(8000, {log: false});

io.sockets.on('connection', function(socket) {
    socket.on('send-file', function(name, buffer) {
        var fs = require('fs');

        //path to store uploaded files (NOTE: presumed you have created the folders)
        var fileName = __dirname + '/tmp/uploads/' + name;

        fs.open(fileName, 'a', 0755, function(err, fd) {
            if (err) throw err;

            fs.write(fd, buffer, null, 'Binary', function(err, written, buff) {
                fs.close(fd, function() {
                    console.log('File saved successful!');
                });
            })
        });

    });
});

第二步（在我的情况下，我使用了翡翠而不是 html）

extends layout

block content
    h1 Tiny Uploader
    p Save an Image to the Server
    input#input-files(type='file', name='files[]', data-url='/upload', multiple)
    button#send-file(onclick='javascript:sendFile();') Send

    script(src='http://127.0.0.1:8000/socket.io/socket.io.js')
    script(src='/javascripts/uploader.js')

第三步和第四步（编码uploader.js将文件发送到服务器）

//variable declaration
var filesUpload = null;
var file = null;
var socket = io.connect('http://localhost:8000');
var send = false;

if (window.File && window.FileReader && window.FileList) {
    //HTML5 File API ready
    init();
} else {
    //browser has no support for HTML5 File API
    //send a error message or something like that
    //TODO
}

/**
 * Initialize the listeners and send the file if have.
 */
function init() {
    filesUpload = document.getElementById('input-files');
    filesUpload.addEventListener('change', fileHandler, false);
}

/**
 * Handle the file change event to send it content.
 * @param e
 */
function fileHandler(e) {
    var files = e.target.files || e.dataTransfer.files;

    if (files) {
        //send only the first one
        file = files[0];
    }
}

function sendFile() {
    if (file) {
        //read the file content and prepare to send it
        var reader = new FileReader();

        reader.onload = function(e) {
            console.log('Sending file...');
            //get all content
            var buffer = e.target.result;
            //send the content via socket
            socket.emit('send-file', file.name, buffer);
        };
        reader.readAsBinaryString(file);
    }
}

一些重要的考虑：

这是一个套接字文件上传器的小样本。我在这里不考虑一些重要的事情：文件块发送文件而不是连续发送所有内容；更新发送的文件状态（错误消息、成功消息、进度条或百分比阶段等）。因此，这是对您自己的文件上传器进行编码的初始步骤的示例。在这种情况下，我们不需要表单来发送文件，它完全是通过 socket.io 进行的异步事务。

我希望这篇文章有帮助。

于 2013-02-09T22:15:10.547 回答
0

本教程更进一步，因为您可以暂停/恢复上传，但您会发现如何通过 socketio 上传文件 :)

于 2013-02-09T16:03:01.973 回答