socket.io如何上傳圖片并發送到服務器？

Question 1

我有一個允許用戶上傳圖像的輸入，我如何才能把這個圖像發送到服務器上呢？

到目前為止，我的情況是：

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)

Question 2

你要做的第一件事就是序列化圖像。這意味著我們需要將圖像文件轉換成可以通過互聯網傳輸的內容，在這種情況下，最好的選擇是base64編碼。以下是您的解決方案：

Client-side

<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>

Server-side

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

Answer 1

你要做的第一件事就是序列化圖像。這意味著我們需要將圖像文件轉換成可以通過互聯網傳輸的內容，在這種情況下，最好的選擇是base64編碼。以下是您的解決方案：

Client-side

<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>

Server-side

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如何上傳圖片并發送到服務器？

Client-side

Server-side

熱門問答

從db select創建perl哈希

pythondict extend value中的列表

New-AzStorageShare-Powerhsell Cmdlet失敗，因為“服務器未能驗證request.””

從帶有一個或多個條件的字符串中刪除單詞

如何訪問Symfony Http客戶端響應的URL？

更改繪圖散點圖顏色

VS2017 MFC總提示類未定義，然而我已經把每一個類都聲明了

springboot無法連接dubbo注冊中心怎么回事

虛擬機下安裝了Ubuntu，開啟ssh服務無法連接的問題

PHP-打印沒有網址和日期的頁面

如何用python生成時間段相關的表格？

微信小程序關于文件下載問題：PDF如何保存到本地而不是’wx.saveFile’保存到本地緩存，求解決本問題解答，謝謝