socket.io 如何上传图片到服务器？

Question

我有一个让用户上传图片的输入，我怎样才能将这张图片发送到服务器？

这是我目前所拥有的：

server.js

const express = require("express");
const path = require("path");
const app = express();
const http = require("http").Server(app);
const io = require("socket.io")(http);

var PORT = 7778;
app.use(express.static(path.join(__dirname)));
app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, "index.html"));
});
io.on("connection", (socket) => {
    socket.on("send-img", () => {
        console.log("img recieved");
    });
});
http.listen(PORT, () => {
    console.log("Server started on port: " + PORT);
});

client.html

<html>
    <head>
        <script src="/socket.io/socket.io.js"></script>
    </head>
    <body>
        <h1>Works!</h1>
        <input type="file" accept=".jpg, jpeg, png" multiple id="img-uplaod" />
        <button id="img-submit">Click Me</button>
    </body>
    <script>
        const socket = io();
        document.getElementById("img-submit").onclick = function () {
            socket.emit("send-img");
        };
    </script>
</html>

下面发布的答案几乎有效，但我收到此错误：

   at Object.openSync (fs.js:443:3)
    at Object.writeFileSync (fs.js:1194:35)
    at Socket.socket.on (/home/pyroot/Desktop/main-dev/projects-main/sell-anything/server.js:19:6)
    at Socket.emit (events.js:198:13)
    at /home/pyroot/Desktop/main-dev/projects-main/sell-anything/node_modules/socket.io/lib/socket.js:528:12
    at process._tickCallback (internal/process/next_tick.js:61:11)

Answer 1

您要做的第一件事是序列化图像。这意味着我们需要将我们的图像文件转换成可以通过互联网传输的东西，在这种情况下，最好的选择是 base64 编码。这是您的解决方案：

客户端

<script>
    const socket = io();
    document.getElementById("img-submit").onclick = function () {
        const ourFile = document.getElementById('img-uplaod').files[0];
        const reader = new FileReader();
        reader.onloadend = function() {
             socket.emit("send-img", reader.result);
        }
        reader.readAsDataURL(ourFile);
    };
</script>

服务器端

const express = require("express");
const path = require("path");
const fs = require("fs");
const app = express();
const http = require("http").Server(app);
const io = require("socket.io")(http);

var PORT = 7778;
app.use(express.static(path.join(__dirname)));
app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, "index.html"));
});
io.on("connection", (socket) => {
    socket.on("send-img", (image) => {
        const splitted = image.split(';base64,');
        const format = splitted[0].split('/')[1];
        fs.writeFileSync('./image.' + format, splitted[1], { encoding: 'base64' });
    });
});
http.listen(PORT, () => {
    console.log("Server started on port: " + PORT);
});

socket.io 如何上传图片到服务器？

socket.io how to upload and send a image to the server?

file-upload

node.js

socket.io

客户端

服务器端