正文

轻松掌握Node.js文件上传：前后端高效交互全攻略

/0 浏览量
0813

在当今的互联网时代，文件上传功能已经成为网站和应用程序中不可或缺的一部分。Node.js凭借其轻量级、高性能的特点，成为了实现文件上传的理想选择。本文将带你轻松掌握Node.js文件上传的技巧，包括前后端的高效交互。

一、Node.js文件上传的基本原理

Node.js文件上传主要依赖于两个核心模块：http和fs。http模块用于创建服务器和客户端，处理HTTP请求；fs模块用于文件系统的操作，如读取、写入文件。

1.1 创建服务器

首先，我们需要使用http模块创建一个服务器。服务器将监听客户端的请求，并处理上传的文件。

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  if (req.method === 'POST' && req.url === '/upload') {
    let filePath = path.join(__dirname, 'uploads', req.headers['filename']);
    let fileStream = fs.createWriteStream(filePath);

    req.pipe(fileStream);

    fileStream.on('finish', () => {
      res.writeHead(200, { 'Content-Type': 'text/plain' });
      res.end('文件上传成功！');
    });
  }
});

server.listen(3000, () => {
  console.log('服务器启动成功，监听端口：3000');
});

1.2 处理文件上传

在上面的代码中，我们创建了一个名为/upload的路由，用于处理文件上传请求。客户端将文件以二进制流的形式发送到服务器，服务器将文件写入指定的目录。

二、前后端高效交互

为了实现前后端的高效交互，我们需要在客户端和服务器端进行一些调整。

2.1 客户端

在客户端，我们可以使用HTML和JavaScript来实现文件上传功能。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件上传</title>
</head>
<body>
  <input type="file" id="fileInput">
  <button onclick="uploadFile()">上传文件</button>

  <script>
    function uploadFile() {
      const fileInput = document.getElementById('fileInput');
      const formData = new FormData();
      formData.append('file', fileInput.files[0]);

      fetch('http://localhost:3000/upload', {
        method: 'POST',
        body: formData
      })
      .then(response => response.text())
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error('上传失败：', error);
      });
    }
  </script>
</body>
</html>

2.2 服务器端

在服务器端，我们需要对上传的文件进行一些处理，例如重命名、压缩等。以下是一个示例：

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  if (req.method === 'POST' && req.url === '/upload') {
    let filePath = path.join(__dirname, 'uploads', req.headers['filename']);
    let fileStream = fs.createWriteStream(filePath);

    req.pipe(fileStream);

    fileStream.on('finish', () => {
      // 重命名文件
      let newFilePath = path.join(__dirname, 'uploads', 'new_' + req.headers['filename']);
      fs.renameSync(filePath, newFilePath);

      // 压缩文件
      const archiver = require('archiver')('zip');
      const output = fs.createWriteStream(newFilePath + '.zip');
      archiver.pipe(output);
      archiver.directory(newFilePath, false);
      archiver.finalize();

      res.writeHead(200, { 'Content-Type': 'text/plain' });
      res.end('文件上传并压缩成功！');
    });
  }
});

server.listen(3000, () => {
  console.log('服务器启动成功，监听端口：3000');
});

三、总结

通过本文的介绍，相信你已经掌握了Node.js文件上传的基本原理和前后端高效交互的方法。在实际开发过程中，你可以根据自己的需求对代码进行调整和优化。希望这篇文章能帮助你轻松实现文件上传功能。

-- 展开阅读全文 --