Nodejs formidable的progress事件可用来干什么啊？

Nodejs formidable的progress事件可用来干什么啊？

看到的demo中都是将文件上传的进度输出到控制台中，那可不可将这个进度信息传到客户端，来给客户显示文件的上传进度？ 如果可以，怎么将这个进度信息传给客户端？ 那还有没有其他的应用场景，请大家指点。

3 回复

Node.js Formidable的progress事件可用来干什么？

在处理文件上传时，progress事件是非常有用的。它可以帮助我们了解当前文件上传的进度，并且可以将这些信息传递给客户端，以实现实时更新上传进度的功能。

示例代码

首先，确保你已经安装了formidable模块：

npm install formidable

接下来，我们将创建一个简单的服务器，该服务器能够接收文件上传请求，并通过WebSocket将上传进度实时传递给客户端。

服务器端代码
const http = require('http');
const WebSocket = require('ws');
const formidable = require('formidable');

// 创建HTTP服务器
const server = http.createServer((req, res) => {
    if (req.url === '/upload' && req.method.toLowerCase() === 'post') {
        const form = new formidable.IncomingForm();

        // 监听progress事件
        form.on('progress', (bytesReceived, bytesExpected) => {
            const progress = (bytesReceived / bytesExpected) * 100;
            // 将进度信息广播给所有连接的WebSocket客户端
            wss.clients.forEach(client => {
                if (client.readyState === WebSocket.OPEN) {
                    client.send(JSON.stringify({ progress }));
                }
            });
        });

        form.parse(req, (err, fields, files) => {
            if (err) {
                console.error(err);
                res.writeHead(500);
                return res.end();
            }
            res.writeHead(200);
            res.end('File uploaded successfully');
        });
    } else {
        res.writeHead(404);
        res.end('Not Found');
    }
});

// 创建WebSocket服务器
const wss = new WebSocket.Server({ server });

server.listen(3000, () => {
    console.log('Server listening on port 3000');
});
客户端代码

客户端需要使用WebSocket来接收上传进度信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload Progress</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button onclick="startUpload()">Upload</button>
    <div id="progress"></div>

    <script>
        function startUpload() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            const formData = new FormData();
            formData.append('file', file);

            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload', true);

            xhr.upload.addEventListener('progress', function(event) {
                if (event.lengthComputable) {
                    const percentComplete = event.loaded / event.total * 100;
                    document.getElementById('progress').innerText = `Upload Progress: ${percentComplete.toFixed(2)}%`;
                }
            }, false);

            xhr.send(formData);
        }

        const socket = new WebSocket('ws://localhost:3000');

        socket.onmessage = function(event) {
            const data = JSON.parse(event.data);
            document.getElementById('progress').innerText = `Server Progress: ${data.progress.toFixed(2)}%`;
        };
    </script>
</body>
</html>

解释

  • 服务器端：我们使用formidable库来解析文件上传请求。当接收到文件数据时，progress事件会被触发，我们通过WebSocket将当前的上传进度发送给客户端。

  • 客户端：我们使用XMLHttpRequest来发送文件上传请求，并监听其progress事件来显示本地的上传进度。同时，我们还建立了一个WebSocket连接，用于接收来自服务器的上传进度信息。

通过这种方式，我们可以实现一个实时更新的文件上传进度显示功能。


html5直接就可以显示进度

formidable 的 progress 事件可以用来追踪文件上传的进度，并且可以将这个进度信息传递给客户端，以便客户端能够实时显示上传状态。除了输出到控制台，你可以通过 WebSocket、Server-Sent Events (SSE) 或者 AJAX 轮询等方式将进度信息发送给客户端。

示例代码

假设我们使用 WebSocket 来实现这一功能：

  1. 服务端（Node.js）

首先安装 WebSocket 库：

npm install ws

然后编写服务端代码：

const http = require('http');
const WebSocket = require('ws');
const formidable = require('formidable');

const server = http.createServer((req, res) => {
    if (req.url === '/upload' && req.method === 'POST') {
        const form = new formidable.IncomingForm();
        
        form.parse(req, (err, fields, files) => {
            if (err) {
                console.error(err);
                res.writeHead(500);
                res.end('Internal Server Error');
            } else {
                res.writeHead(200);
                res.end('File uploaded successfully');
            }
        });
        
        // 使用 WebSocket 发送进度信息
        form.on('progress', (bytesReceived, bytesExpected) => {
            const progress = (bytesReceived / bytesExpected) * 100;
            wss.clients.forEach(client => {
                if (client.readyState === WebSocket.OPEN) {
                    client.send(JSON.stringify({ type: 'progress', data: progress }));
                }
            });
        });
    } else {
        res.writeHead(404);
        res.end('Not Found');
    }
});

const wss = new WebSocket.Server({ server });

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});
  1. 客户端（HTML + JavaScript）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload Progress</title>
</head>
<body>
    <h1>File Upload</h1>
    <input type="file" id="fileInput">
    <button onclick="uploadFile()">Upload</button>
    <div id="progress">0%</div>

    <script>
        const socket = new WebSocket('ws://localhost:3000');

        function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];

            const formData = new FormData();
            formData.append('file', file);

            fetch('/upload', {
                method: 'POST',
                body: formData
            });
        }

        socket.onmessage = function(event) {
            const message = JSON.parse(event.data);
            if (message.type === 'progress') {
                document.getElementById('progress').innerText = message.data.toFixed(2) + '%';
            }
        };
    </script>
</body>
</html>

在这个例子中，服务端使用 formidable 处理文件上传，并通过 WebSocket 将上传进度实时发送给客户端。客户端通过 WebSocket 接收进度信息并更新页面上的进度条或文本。

除了用于文件上传进度显示外，progress 事件还可以用于其他需要实时反馈数据大小变化的场景，例如大数据传输、流式处理等。

回到顶部