在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>
