当前位置：首页 > article >正文

如何在Node.js中处理文件上传？

article 2025/3/1 10:18:39

在Node.js中处理文件上传是一个常见的需求，尤其是在构建Web应用程序时。通过使用合适的中间件，你可以轻松地实现文件上传功能。以下是一个详细的指南，介绍如何在Node.js中处理文件上传。

1. 环境准备

1.1 安装Node.js

确保你的系统中已经安装了Node.js。可以通过以下命令检查：

node -v
npm -v

如果未安装，可以从Node.js官方网站下载并安装。

1.2 创建项目

新建一个目录并初始化一个Node.js项目：

mkdir file-upload-example
cd file-upload-example
npm init -y

1.3 安装依赖

我们需要安装一些依赖包，包括express和multer。express是一个流行的Web框架，而multer是一个用于处理multipart/form-data的中间件，通常用于文件上传。

npm install express multer

2. 创建基本的Express应用

在项目根目录下创建一个名为app.js的文件，并添加以下基本的Express应用代码。

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

const app = express();
const PORT = 3000;

// 设置存储引擎
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname)); // 使用时间戳作为文件名
  }
});

// 初始化上传中间件
const upload = multer({ storage: storage });

// 创建uploads目录
const fs = require('fs');
const dir = './uploads';
if (!fs.existsSync(dir)){
    fs.mkdirSync(dir);
}

// 设置路由
app.post('/upload', upload.single('file'), (req, res) => {
  res.send('文件上传成功！');
});

// 启动服务
app.listen(PORT, () => {
  console.log(`服务器正在运行在 http://localhost:${PORT}`);
});

2.1 代码解释

multer.diskStorage: 这里我们定义了文件的存储位置和文件名。文件将被存储在uploads目录中，文件名是当前时间戳加上原文件的扩展名。
upload.single(‘file’): 这个中间件处理单个文件上传，file是表单中input的name属性。
fs: 用于检查并创建uploads目录。

3. 创建前端表单

为了测试文件上传，我们可以创建一个简单的HTML表单。创建一个名为index.html的文件，并添加以下代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>
<body>
    <h1>上传文件</h1>
    <form action="http://localhost:3000/upload" method="POST" enctype="multipart/form-data">
        <input type="file" name="file" required>
        <button type="submit">上传</button>
    </form>
</body>
</html>

3.1 代码解释

form: 表单的action属性指向我们的上传路由，method使用POST，并且需要设置enctype为multipart/form-data以支持文件上传。

4. 测试文件上传

启动Node.js服务器：
```
node app.js
```
打开index.html文件，选择一个文件并上传。
如果一切正常，你应该会看到“文件上传成功！”的消息，并且上传的文件会被保存到uploads目录中。

5. 处理错误和文件类型限制

在实际应用中，你可能需要处理错误和限制文件类型。我们可以在multer中添加这些功能。

5.1 错误处理

修改上传中间件以添加错误处理：

const upload = multer({
  storage: storage,
  limits: { fileSize: 1024 * 1024 * 5 }, // 限制文件大小为5MB
  fileFilter: (req, file, cb) => {
    const fileTypes = /jpeg|jpg|png|gif/; // 允许的文件类型
    const extname = fileTypes.test(path.extname(file.originalname).toLowerCase());
    const mimetype = fileTypes.test(file.mimetype);

    if (extname && mimetype) {
      return cb(null, true);
    } else {
      cb('错误：文件类型不支持！');
    }
  }
});

5.2 处理错误响应

更新路由以处理错误：

app.post('/upload', (req, res) => {
  upload.single('file')(req, res, (err) => {
    if (err) {
      return res.status(400).send(err);
    }
    res.send('文件上传成功！');
  });
});

6. 完整代码示例

以下是整合了所有内容的完整代码示例。

6.1 `app.js`

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

const app = express();
const PORT = 3000;

// 创建uploads目录
const dir = './uploads';
if (!fs.existsSync(dir)){
    fs.mkdirSync(dir);
}

// 设置存储引擎
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname));
  }
});

// 初始化上传中间件
const upload = multer({
  storage: storage,
  limits: { fileSize: 1024 * 1024 * 5 },
  fileFilter: (req, file, cb) => {
    const fileTypes = /jpeg|jpg|png|gif/;
    const extname = fileTypes.test(path.extname(file.originalname).toLowerCase());
    const mimetype = fileTypes.test(file.mimetype);
    if (extname && mimetype) {
      return cb(null, true);
    } else {
      cb('错误：文件类型不支持！');
    }
  }
});

// 设置路由
app.post('/upload', (req, res) => {
  upload.single('file')(req, res, (err) => {
    if (err) {
      return res.status(400).send(err);
    }
    res.send('文件上传成功！');
  });
});

// 启动服务
app.listen(PORT, () => {
  console.log(`服务器正在运行在 http://localhost:${PORT}`);
});

6.2 `index.html`

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>
<body>
    <h1>上传文件</h1>
    <form action="http://localhost:3000/upload" method="POST" enctype="multipart/form-data">
        <input type="file" name="file" required>
        <button type="submit">上传</button>
    </form>
</body>
</html>