前端文件上传与Express/fs后端本地存储教程

霞舞

发布时间：2025-09-04 22:51:18

382人浏览过

来源于php中文网

原创

前端文件上传与express/fs后端本地存储教程

本文将详细介绍如何使用前端

元素上传文件，并通过 Express 框架和 Node.js 的 fs 模块将其保存到服务器本地文件夹中。文章将涵盖前端表单配置、后端 body 解析中间件的选择与配置，以及使用 Multer 中间件处理文件上传的具体步骤，并提供示例代码和注意事项，帮助开发者快速实现文件上传功能。

前端：配置表单以支持文件上传

要使浏览器能够上传文件，必须在 HTML 表单中添加 enctype 属性，并将其设置为 multipart/form-data。默认情况下，enctype 属性为 application/x-www-form-urlencoded，它不适合传输文件。

注意: name 属性的值 (image 在本例中) 在后端用于识别上传的文件。

后端：使用 Multer 处理文件上传

Express 默认的 body-parser 中间件不处理 multipart/form-data 类型的请求。因此，我们需要使用专门为此目的设计的中间件，例如 Multer。

立即学习“前端免费学习笔记（深入）”；

安装 Multer:
```
npm install multer
```
导入并配置 Multer:

ERMEB云盘发卡系统源码
ERMEB云盘发卡系统官方正版系统，发卡系统操作简单、方便、易懂。系统微信小程序前端采用nuiapp后端采用think PHP6PC前端采用vue开发使用场景：文件上传储存，适合个人/个体/中小企业使用。本系统配合微信小程序端进行使用，文件下载以及发卡商品卡密领取都需要进入小程序内获取下载码以及卡密领取，小程序内可设置积分充值以及任务获取积分，支持微信激励广告领取文件下载码以及卡密商品，可实现

下载
```
const express = require('express');
const multer  = require('multer');
const app = express();

// 配置 Multer 存储
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/') // 指定文件保存目录
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname) // 使用原始文件名
  }
})

const upload = multer({ storage: storage });
```
multer.diskStorage() 允许您完全控制磁盘上文件的存储。 destination 选项确定文件应存储在哪个文件夹中。如果未提供 destination，则操作系统将使用默认的临时目录。 filename 用于确定文件夹中的文件名。如果未提供 filename，则 Multer 将生成一个不带扩展名的随机文件名。
在路由中使用 Multer 中间件:
```
app.post('/products', upload.single('image'), (req, res) => {
  console.log(req.file); // 上传的文件信息
  console.log(req.body); // 其他表单数据

  // 文件已保存到 ./uploads/ 目录，可以使用 fs 模块进一步处理
  res.render('products', { title: 'bib' });
});
```
upload.single('image') 是一个中间件，它只处理一个名为 image 的文件字段。上传的文件信息存储在 req.file 对象中。如果有多个文件字段，可以使用 upload.array('images', maxCount) 或 upload.fields([{ name: 'image1', maxCount: 1 }, { name: 'image2', maxCount: 3 }])。

完整示例

app.js:

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

// 配置 Multer 存储
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/') // 指定文件保存目录
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname) // 使用原始文件名
  }
})

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

app.set('view engine', 'ejs'); // 设置 ejs 模板引擎

app.post('/products', upload.single('image'), (req, res) => {
  console.log(req.file); // 上传的文件信息
  console.log(req.body); // 其他表单数据

  // 文件已保存到 ./uploads/ 目录，可以使用 fs 模块进一步处理
  res.render('products', { title: 'bib' });
});

app.get('/products', (req, res) => {
    res.render('products', { title: 'bib' })
})

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

products.ejs: