Question

我正在使用套接字发送文件。在服务器端，我正在侦听来自客户端的流，但是从客户端端，我无法按块发送数据，这些数据可以发送到服务器端。我使用FileReader读取了片中的文件，您能告诉我我做错了什么吗？

客户代码

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>Echo server</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <h1>File Upload</h1>
    <form id="form" id="chat_form">
        <input type="file" id="file_input" />
        <input type="button" onclick="submit1()" value="submit">
    </form>
    <script src="socket.io/socket.io.js"></script>
    <script type="text/javascript">
        var socket = io('localhost:8080');
        var fReader;
        socket.on('echo', function (data) {
            console.log(data);
        });
        socket.emit('echo', 'this is a message');
        function submit1() {
            var file = $("#file_input")[0].files[0];
            var reader = new FileReader();
            reader.onload = function (evnt) {
                socket.emit('join', { 'Name': Name, Data: evnt.target.result });
            }
            reader.readAsArrayBuffer(file);
        }
    </script>
</body>
</head>

服务器代码

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

app.get('/', function(req, res){
  res.sendFile(__dirname + '/client.html')
});

io.on('connection', function(socket){
  var writeStream  = fs.createWriteStream(__dirname +'/m.png');
  socket.on('echo', function(data){
    socket.emit('echo', data);
  });
  socket.on('join', function(chunk){
    console.log(chunk, "==============chunk=====================");
    writeStream.write(chunk);
  })
});

Answer 1

您永远不会将file对象赋予FileReader对象。实际上，您永远不会对其进行任何操作，因此FileReader对象永远不会有任何关系。例如，您可能想要做：

reader.readAsArrayBuffer(file);

它看起来也不像是您从Reader对象正确获取数据。这里有一个代码示例：File upload with socket.io和Send Images through Websockets。

从客户端发送数据块

1 个答案: