javascript - 从客户端发送数据块
问题描述
我正在使用套接字发送文件。在服务器端,我正在收听来自客户端的流,但是从客户端,我无法以可以发送到服务器端的块的形式发送数据。我使用 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);
})
});
解决方案
你永远不会把file
对象交给你的FileReader
对象。事实上,你永远不会对它做任何事情,所以FileReader
对象永远不会有任何事情要做。例如,您可能想要执行以下操作:
reader.readAsArrayBuffer(file);
看起来您也没有正确地从阅读器对象中获取数据。这里有一个代码示例:File upload with socket.io和Send Images through Websockets。
推荐阅读
- reshape - “张量”对象没有“重塑”属性
- java - 如何在gridview中显示图像
- google-data-studio - 查看者如何控制 Google 数据洞察中的日期范围比较?
- python - 如何从多个常见元素的嵌套列表中创建数据框
- scala - 使用 sbt 在 Scala 中导入包
- azure - 在 Databricks Jobs API 中传递 JVM 参数
- c# - LinQ 访问相互比较的项目
- firebase - 在 2020 年 3 月 1 日之前切换到 Play Referrer API -Google Play
- python - Openpyxl 读取错误的 xslx 文件
- css - CSS - 空白和 webkit-line-clamp 之间的问题