Nodejs上传文件时，如何时时获得文件上传的进度

Nodejs上传文件时，如何时时获得文件上传的进度

nodejs上传文件的时候，我想时时获得文件上传的进度 怎么处理？

8 回复

当然可以。在Node.js中，要实时获取文件上传的进度，可以通过使用一些中间件如multer来处理文件上传，并结合前端JavaScript来显示上传进度。下面是一个简单的示例，展示如何实现这一功能。

前端代码（HTML + JavaScript）

首先，我们需要一个简单的HTML表单来选择文件，并通过JavaScript监听文件上传的进度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload Progress</title>
</head>
<body>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="file" />
        <button type="submit">Upload</button>
    </form>
    <div id="progressBar">0%</div>

    <script>
        document.getElementById('uploadForm').addEventListener('submit', function(event) {
            event.preventDefault();

            const formData = new FormData(this);

            fetch('/upload', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
              .then(data => console.log(data))
              .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

后端代码（Node.js + Multer）

接下来，在后端，我们将使用multer来处理文件上传，并添加必要的逻辑来发送进度信息到客户端：

  1. 首先安装所需的库：

    npm install express multer

  2. 编写Node.js服务器代码：

const express = require('express');
const multer = require('multer');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
    const fileSize = req.file.size;
    let uploadedBytes = 0;

    // 创建一个可读流来读取上传的文件
    const fileStream = fs.createReadStream(req.file.path);
    fileStream.on('data', (chunk) => {
        uploadedBytes += chunk.length;
        const progress = (uploadedBytes / fileSize) * 100;
        res.write(`\r\nProgress: ${progress.toFixed(2)}%`);
    });

    fileStream.on('end', () => {
        res.end();
        fs.unlinkSync(req.file.path); // 删除临时文件
    });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 前端：我们创建了一个简单的HTML表单和一个JavaScript事件处理器，当用户提交表单时，会触发文件上传请求。

  2. 后端：我们使用multer来处理文件上传。然后，我们通过创建一个可读流来读取上传的文件，并在每次数据块到达时更新进度。

请注意，上述代码只是一个基本示例，实际应用中可能需要更复杂的错误处理和优化。


求高手……

以前用formidable，可以知道上载进度。现在formidable集成到express里了，应该还有这功能。

如果是自己做的话，可以考虑用sokect.io来实时推送百分比。

给你个教程 http://dev.tutsplus.com/tutorials/how-to-create-a-resumable-video-uploade-in-node-js–net-25445

这个涉及到数据流的操作 http://www.nodejs.org/api/stream.html

实现起来并不难

套框架，玩起来没一点意思

要实现在Node.js中上传文件时时时获得文件上传进度的需求，可以通过前端配合后端实现。前端可以使用JavaScript库如axios或form-data来监控上传进度，并通过Ajax请求将进度信息传递给后端。后端则需要处理这些进度更新并记录或返回给客户端。

这里提供一个简单的示例：

前端代码（使用axios）

首先确保你已经安装了axios库。可以使用以下命令进行安装：

npm install axios

然后在前端页面中使用axios来上传文件并获取上传进度：

const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');

// 创建formData对象并添加文件
const formData = new FormData();
formData.append('file', fs.createReadStream('/path/to/your/file'));

axios.post(
    'http://localhost:3000/upload',
    formData,
    {
        onUploadProgress: function (progressEvent) {
            // 计算当前进度
            const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            console.log(`上传进度：${progress}%`);
            
            // 可以在这里发送当前进度到服务器，以便服务器记录或处理
        },
        headers: formData.getHeaders()
    }
).then(response => {
    console.log('文件上传成功', response.data);
}).catch(error => {
    console.error('文件上传失败', error);
});

后端代码（使用Express）

你需要一个Express服务器来接收上传的文件，并且可以创建一个路由来接收进度更新。

首先安装必要的库：

npm install express multer

然后设置服务器：

const express = require('express');
const multer = require('multer');
const app = express();

const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
    console.log('文件上传成功');
    res.send('文件已上传');
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

在这个例子中，我们没有直接实现进度更新的反馈，但你可以扩展这个应用，在前端发送进度更新时，在后端创建一个对应的API来接收这些更新，并保存到数据库或者简单地打印出来。

这种方法不仅能够帮助你在上传过程中得到实时反馈，还能让你更灵活地控制上传流程。

回到顶部