Node.js教程16：点亮你的文件上传之路

2023-09-11 18:18:37

在现代Web应用程序中，文件上传是一个必不可少的特性。从个人照片到公司报告，各种类型的文件需要在客户端和服务器之间传输。作为一名Node.js开发人员，掌握文件上传的知识至关重要。

在本文中，我们将逐步探讨如何在Node.js应用中实现文件上传功能。我们将使用Express框架和Multer中间件来处理文件上传。我们将从客户端提交数据开始，然后深入到服务器端代码，最终实现上传文件的成功处理。

前端准备

在开始之前，我们需要在客户端创建一个HTML表单，以便用户可以上传文件。这是一个简单的示例：

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="Upload">
</form>

在这个表单中，<input type="file">允许用户选择文件上传，<input type="submit">用于提交表单。值得注意的是，<form>的enctype属性被设置为"multipart/form-data", 这是为了告诉服务器我们正在上传文件。

服务端配置

在服务端，我们需要安装Multer中间件来处理文件上传。这是一个非常流行的Node.js中间件，可以帮助我们轻松地处理文件上传请求。

npm install multer

安装完成后，我们可以在Node.js应用中使用Multer。以下是一个简单的示例：

const multer = require('multer');

const storage = multer.diskStorage({
  destination: './uploads/',
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage });

在上面的代码中，我们首先加载了Multer。然后，我们创建了一个存储配置对象，指定了上传文件的保存路径和文件名生成规则。最后，我们创建了一个Multer实例，并将其存储在upload变量中。

路由处理

现在，我们需要在Express路由中使用Multer。这将允许我们捕获文件上传请求并处理上传的文件。

const express = require('express');
const multer = require('multer');

const app = express();

const upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded successfully!');
});