极客前沿

Multer 入门教程:一步步学会文件上传

2026-05-09 01:31
DEV Beginners
查看原文

本文带你从零开始,安装 Multer 并实现第一个文件上传功能,适合前端和 Node.js 新手。

准备工作

在开始之前,确保你已经安装了 Node.js(一个让 JavaScript 在服务器上运行的环境)和 npm(Node.js 自带的包管理工具)。然后创建一个新项目文件夹,在终端中运行 npm init -y 生成 package.json 文件。

安装 Multer

Multer 是一个 Node.js 中间件,专门用来处理 multipart/form-data 类型的表单数据,也就是文件上传。在项目根目录下运行:

Tutorial Image
npm install multer

同时安装 Express:

npm install express

第一个文件上传例子

  1. 在项目根目录创建一个 server.js 文件,并写入以下代码:
const express = require('express');
const multer = require('multer');
const app = express();

// 设置存储位置为 uploads 文件夹
const upload = multer({ dest: 'uploads/' });

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

app.listen(3000, () => console.log('服务器运行在 http://localhost:3000'));
  1. 在项目根目录创建一个名为 uploads 的文件夹,用来存放上传的文件。
  2. 运行 node server.js 启动服务器。

验证是否成功

使用 Postman 或 curl 发送一个 POST 请求到 http://localhost:3000/upload,在 Body 中选择 form-data,添加一个字段名为 file 的文件,然后发送。如果收到“文件上传成功!”的响应,并且在 uploads 文件夹中看到了上传的文件,说明你已经成功跑通了第一个文件上传功能!

常见问题与提示

  • 上传的文件名是乱码? Multer 默认用随机字符串作为文件名,你可以通过自定义存储引擎来保留原文件名(但新手阶段建议先用默认设置)。
  • 上传文件夹不存在? 确保 uploads 文件夹已经创建,否则 Multer 会报错。
  • 文件大小限制? 可以在 multer() 配置中添加 limits: { fileSize: 1000000 } 限制文件大小为 1MB。
  • 多文件上传? 使用 upload.array('files', 5) 可以一次上传最多 5 个文件。

现在你已经掌握了 Multer 的基本用法,可以继续探索如何自定义文件名、限制文件类型等进阶功能。

内容来源

DEV Beginners

发布时间

2026-05-09 01:31

返回 AI技术