基于Node.js与Express实现文件上传进度监控的方案咨询

嘿，正好我对express-fileupload的底层逻辑比较熟悉，它依赖的busboy其实已经提供了监听上传进度的能力，只是默认被封装起来了，咱们可以通过下面的方法轻松获取已上传数据量，实现进度监控：

核心思路 #

express-fileupload返回的每个文件对象都包含一个stream可读流属性，我们可以监听这个流的data事件，累加每个数据块（chunk）的长度，再和文件总大小对比，就能算出实时上传进度。

代码实现示例 #

修改你的上传路由代码，加入进度监听逻辑：

'use strict';
const express = require('express');
const fileUpload = require('express-fileupload');
const fs = require('fs');
const app = express();

// 初始化fileupload中间件，可根据需求添加配置
app.use(fileUpload({
  createParentPath: true, // 自动创建上传目录的父路径
  // 如果上传大文件，建议开启临时文件模式，避免内存溢出
  // useTempFiles: true,
  // tempFileDir: '/tmp/'
}));

app.post('/upload', (req, res) => {
  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send('No files were uploaded.');
  }

  // 假设前端上传的文件字段名为`uploadFile`，可根据你的实际字段名修改
  const targetFile = req.files.uploadFile;
  const totalFileSize = targetFile.size;
  let uploadedBytes = 0;

  // 监听文件流的data事件，累加已上传字节数
  targetFile.stream.on('data', (chunk) => {
    uploadedBytes += chunk.length;
    const uploadProgress = (uploadedBytes / totalFileSize) * 100;
    // 这里可以输出到日志，或者通过WebSocket/SSE推送给前端展示进度条
    console.log(`当前上传进度: ${uploadProgress.toFixed(2)}%`);
  });

  // 保存文件到目标路径
  const savePath = `${__dirname}/uploads/${targetFile.name}`;
  targetFile.mv(savePath, (err) => {
    if (err) {
      console.error('文件保存失败:', err);
      return res.status(500).send('文件上传失败，请重试');
    }
    res.send('文件上传完成！');
  });
});

app.listen(3000, () => {
  console.log('服务器运行在端口3000');
});

额外提示 #

• 如果需要给前端展示实时进度，仅服务器端计算还不够，你需要用WebSocket或者**Server-Sent Events（SSE）**把进度数据推送给前端；如果前端用的是XMLHttpRequest，其实XHR本身也有progress事件可以直接获取前端侧的上传进度，但服务器端的进度监控可以用于后台统计或更精准的状态追踪。
• 上传大文件时，建议开启useTempFiles选项，让文件先写入临时目录，避免占用过多服务器内存。

内容的提问来源于stack exchange，提问作者dambergn