21xrx.com
2025-03-30 19:15:11 Sunday
文章检索 我的文章 写文章
Node.js 文件上传进度监控
2023-07-09 22:13:11 深夜i     11     0
Node js 文件上传 进度监控

Node.js作为一种高效、轻量级的JavaScript运行环境，因其高性能、易拓展等特点，被广泛应用于Web应用开发、异步I/O编程等领域。随着Web应用功能的不断增强，文件上传成为了现代Web应用开发中不可或缺的一环。而对于文件上传进度的监控，Node.js也提供了一些简单易用的解决方案。

一、使用进度条库

Node.js有很多第三方的进度条库，通过这些库可以很方便地实现文件上传进度的监控。其中，tqdm库是一款比较受欢迎的进度条库，它支持命令行、Web等多种环境，并提供了丰富的可定制化选项。

安装tqdm库可使用npm命令：

npm install --save tqdm

使用tqdm库实现文件上传进度监控的示例代码如下：

const fs = require('fs')
const request = require('request')
const { createReadStream } = require('fs')
const FormData = require('form-data')
const { tqdm } = require('tqdm')
const file = 'test.mp4'
const url = 'http://example.com/upload'
const fileSize = fs.statSync(file).size
const form = new FormData()
form.append('file', createReadStream(file))
request.post(url, {
 headers: form.getHeaders(),
 body: form
})
.on('response', function(res) {
 if (res.statusCode !== 200) {
  console.log('Failed to upload file')
  return;
 }
 const progress = tqdm(
  unit: 'B')
 res.on('data', (chunk) => {
  progress.update(chunk.length)
 })
 res.on('end', () => {
  progress.close()
  console.log('Upload completed!')
 })
})

二、使用WebSocket实时通信

另一种实现文件上传进度监控的方式是使用WebSocket实时通信。通过WebSocket建立双向通信的连接，实时将文件上传进度信息推送给客户端，从而实现实时监控。

在Node.js中，可以使用Socket.IO库来实现WebSocket通信。Socket.IO是一款简单易用、功能强大的实时通信库，支持WebSocket协议，并自动切换到HTTP长轮询等技术来保证实时性。

使用Socket.IO实现文件上传进度监控的示例代码如下：

const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
const fs = require('fs')
const { createReadStream } = require('fs')
const FormData = require('form-data')
app.get('/', function(req, res){
 res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket) {
 console.log('a user connected');
 socket.on('upload', function(fileSize) {
  const form = new FormData()
  form.append('file', createReadStream('test.mp4'))
  request.post('http://example.com/upload', {
   headers: form.getHeaders(),
   body: form
  })
  .on('response', function(res) {
   socket.emit('start', fileSize)
   res.on('data', (chunk) => {
    socket.emit('progress', chunk.length)
   })
   res.on('end', () => {
    console.log('Upload completed!')
    socket.emit('complete')
   })
  })
 });
});
http.listen(3000, function(){
 console.log('listening on *:3000');
});

在客户端代码中，通过Socket.IO连接服务器，通过socket.emit方法发送上传文件大小，接收服务器实时推送的进度信息，并实时更新UI界面。

<script src="/socket.io/socket.io.js"></script>
<script>
 const socket = io();
 socket.on('connect', function() {
  console.log('connected to server');
 })
 document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault()
  const fileSize = document.querySelector('input[type="file"]').files[0].size
  socket.emit('upload', fileSize)
 })
 socket.on('start', function(fileSize) {
  const progressBar = document.querySelector('.progress-bar')
  progressBar.removeAttribute('hidden')
  progressBar.setAttribute('max', fileSize)
 })
 socket.on('progress', function(chunkSize) {
  const progressBar = document.querySelector('.progress-bar')
  progressBar.value = progressBar.value + chunkSize
 })
 socket.on('complete', function() {
  const progressBar = document.querySelector('.progress-bar')
  progressBar.value = progressBar.getAttribute('max')
  progressBar.setAttribute('hidden', 'true')
  alert('Upload completed!')
 })
</script>

总结

本文介绍了Node.js中实现文件上传进度监控的两种常用方式：使用进度条库和使用WebSocket实时通信。

使用进度条库比较简单，只需要安装相应的库，并在文件上传过程中更新进度条即可实现，但是无法实时推送进度信息。

使用WebSocket实时通信能够实现实时推送上传进度信息，但需要创建WebSocket连接，并在前后端代码中进行复杂的事件绑定。

综合而言，根据具体的应用场景和需求，选择不同的实现方式才能更好地满足开发的要求。

  
  

评论区