21xrx.com
2024-11-05 18:46:16 Tuesday
登录
文章检索 我的文章 写文章
Node.js 文件上传进度监控
2023-07-09 22:13:11 深夜i     --     --
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连接,并在前后端代码中进行复杂的事件绑定。

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

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复