Hapi.js 中的上传进度管理-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，文件上传是一个非常常见的功能。Hapi.js 是一个 Node.js 的 web 框架，它提供了一个丰富的插件系统，可以用来处理文件上传的逻辑。本文将介绍 Hapi.js 提供的文件上传插件，以及如何使用它来管理上传进度。

Hapi.js 的文件上传插件

Hapi.js 提供了一个插件叫做 hapi/nes，它可以用来处理 WebSocket 连接，在处理文件上传的时候非常有用。使用该插件，我们可以在上传过程中实时地获取上传进度。

hapi/nes 插件可以通过 npm 安装：

npm install nes --save

使用时，我们需要在 Hapi.js 的插件系统中添加该插件：

// javascriptcn.com 代码示例
const Hapi = require('hapi');
const Nes = require('nes');

const server = new Hapi.Server();
const port = process.env.PORT || 3000;

const start = async function() {
  await server.register({ plugin: Nes });
  await server.start();

  console.log(`Server running at: ${server.info.uri}`);
};

start();

实时获取上传进度

在使用 hapi/nes 插件之前，我们需要先将上传的文件流转化为一块块的数据，然后将其发送给后端处理。下面是一个上传视频的示例代码：

// javascriptcn.com 代码示例
const uploadHandler = function(request, h) {
  return new Promise((resolve, reject) => {    
    const form = new Formidable.IncomingForm();
    form.parse(request.payload, function(error, fields, files) {
      const size = files.file.size;
      const fileName = files.file.name;
      const uploadPath = path.join(__dirname, 'uploads', fileName);

      const readStream = fs.createReadStream(files.file.path);
      const writeStream = fs.createWriteStream(uploadPath);

      let uploadedBytes = 0;

      readStream.on('data', function(chunk) {
        writeStream.write(chunk);
        uploadedBytes += chunk.length;

        // 使用 nes 插件推送上传进度
        const percentage = uploadedBytes / size;
        server.publish('/uploadProgress', { file: fileName, percentage: percentage });
      });

      readStream.on('end', function() {
        writeStream.end();
        resolve({ status: 'success', message: '文件上传成功！' });
      });
    });
  });
}

server.route({
  method: 'POST',
  path: '/upload',
  options: {
    payload: {
      output: 'stream',
      maxBytes: 209715200,
      allow: 'multipart/form-data',
      parse: true
    },
    handler: uploadHandler
  }
});

在上传过程中，我们需要使用 readStream 和 writeStream 来读取和写入文件数据，并且在读取文件时还需要使用 nes 插件来实时推送上传进度。

使用 hapi/nes 插件推送上传进度非常简单，我们只需要在上传过程中调用 server.publish 方法即可：

server.publish('/uploadProgress', { file: fileName, percentage: percentage });

这里的 /uploadProgress 是一个 WebSocket 连接的路由，客户端可以通过这个路由来获取实时的上传进度。

监听上传进度更新

为了在前端实时展示上传进度，我们需要在客户端中监听 /uploadProgress 路由的推送。

下面是一个基于 socket.io 的客户端示例代码：

// javascriptcn.com 代码示例
const progress = document.querySelector('.progress');
const progressText = document.querySelector('.progress-text');

const socket = io.connect('http://localhost:3000');

socket.on('/uploadProgress', function(data) {
  const percentage = data.percentage * 100;
  progress.style.width = percentage + '%';
  progressText.innerHTML = `上传进度：${percentage.toFixed(2)}%`;
});

这里的 socket.io 提供了一个 on 方法，可以用来监听一个 WebSocket 路由的推送。在 /uploadProgress 路由接收到后端推送的数据后，我们就可以将上传进度展示到页面上。

总结

在 Hapi.js 中管理文件上传进度需要使用到 hapi/nes 插件来推送实时进度，以及 socket.io 等工具来监听推送并更新页面内容。本文介绍了如何使用这些工具来实现文件上传进度的管理，这对于大文件上传等场景非常有用。

希望这篇文章能够对学习 Hapi.js 的同学有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65391ec67d4982a6eb25bd4a