前端文件上传与Express/fs后端本地存储教程-html教程-PHP中文网

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

霞舞

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

原创

374人浏览过

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

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

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

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

<form action="/products" method="POST" enctype="multipart/form-data">
  <input type="file" name="image" id="image">
  <button class="submit">Submit</button>
</form>

登录后复制

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

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

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

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

安装 Multer:
```
npm install multer
```
登录后复制
导入并配置 Multer:

知我AI·PC客户端
离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

0

查看详情
```
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:

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1>Upload Image</h1>
  <form action="/products" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" id="image">
    <button class="submit">Submit</button>
  </form>
</body>
</html>

登录后复制