Nodejs怎么获取文件上传的进度

Nodejs怎么获取文件上传的进度

{ fields: { title: ‘Hello World’ }, files: { upload: { size: 1558, path: ‘/tmp/1c747974a27a6292743669e91f29350b’, name: ‘us-flag.png’, type: ‘image/png’, lastModifiedDate: Tue, 21 Jun 2011 07:02:41 GMT, _writeStream: [Object], length: [Getter], filename: [Getter], mime: [Getter] } } }

这是请求的内容，请问一下，我怎么判断这个文件有没有上传完成到服务器，求大神教，纠结很久了，


5 回复

要获取文件上传的进度，我们需要使用一个支持进度事件的HTTP客户端库，例如multer或者busboy。这些库可以监听文件上传过程中的各种事件，并且提供文件大小等信息。这里我们将以multer为例来展示如何实现这一功能。

示例代码

首先，确保你已经安装了必要的依赖：

npm install express multer

然后，创建一个简单的Express应用，并配置multer来处理文件上传并监听进度：

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

const app = express();

// 配置multer存储策略
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './uploads'); // 设置上传文件的保存目录
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname); // 设置保存文件名
    }
});

// 创建multer实例
const upload = multer({ storage: storage }).any();

app.post('/upload', (req, res) => {
    // 使用multer中间件处理文件上传
    upload(req, res, (err) => {
        if (err) {
            return res.status(500).send(err);
        }

        console.log("Upload complete.");
        res.send("File uploaded successfully!");
    });
});

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

解释

  1. multer配置：

    • destination 函数定义了文件应该被存储在哪里。
    • filename 函数定义了存储时文件的名称。

  2. multer实例：

    • multer().any() 允许处理任何类型的文件上传，而不仅仅是表单数据。

  3. 处理上传：

    • 在app.post('/upload')路由中，我们使用了upload(req, res, callback)方法来处理上传的文件。
    • 如果发生错误，会返回500状态码和错误信息。
    • 如果没有错误，将打印一条消息并返回成功响应。

获取进度

multer本身并不直接提供进度更新的功能。如果你需要实时的上传进度，可以考虑使用更底层的库如busboy或formidable，它们允许你监听更多的事件（如data、progress等）来实现这一点。

希望这个示例能够帮助你理解如何在Node.js中处理文件上传以及如何跟踪上传进度。


formidable 可以监测上传的进度。你找找例子吧。

defer 参数

multipart.js#L43

This option is useful if you need to bind to the “progress” event, for example.

要获取文件上传的进度，可以使用busboy或multer这类中间件来处理文件上传，并结合一些前端技术来监控上传状态。这里以busboy为例进行说明。

示例代码

首先安装所需的依赖：

npm install express busboy

然后编写一个简单的Express应用来处理文件上传：

const express = require('express');
const Busboy = require('busboy');

const app = express();

app.post('/upload', (req, res) => {
    const busboy = new Busboy({ headers: req.headers });
    let receivedBytes = 0;
    const totalBytes = parseInt(req.headers['content-length'], 10);

    busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
        console.log(`File [${fieldname}] field received with value: filename ${filename}`);

        file.on('data', (data) => {
            receivedBytes += data.length;
            const progress = Math.round((receivedBytes / totalBytes) * 100);
            console.log(`Received ${progress}%`);
        });

        file.on('end', () => {
            console.log(`File [${fieldname}] Finished uploading`);
        });
    });

    busboy.on('finish', () => {
        res.writeHead(200, { 'Connection': 'close' });
        res.end("That's all folks!");
    });

    req.pipe(busboy);
});

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

解释

  1. 引入依赖：使用express和busboy。
  2. 创建中间件：在POST请求路由中创建一个Busboy实例。
  3. 监听事件：
    • file事件：当接收到文件时触发。
    • data事件：每当接收数据片段时触发，可以计算当前进度。
    • end事件：当文件上传完成时触发。
  4. 计算进度：通过监听data事件，可以累计已接收的数据量，并据此计算上传进度。
  5. 返回响应：在finish事件中返回响应，表示文件已完全上传。

客户端部分

客户端需要发送带有Content-Length头部的请求，以便服务端知道总大小。通常情况下，现代浏览器会自动设置这个头部。

这样，你就可以通过控制台输出或前端逻辑（例如更新进度条）来监控文件上传的进度了。

回到顶部