前端文件上传至本地服务器：使用 Express 和 Multer

DDD

发布时间：2025-09-04 22:53:00

705人浏览过

来源于php中文网

原创

前端文件上传至本地服务器：使用 express 和 multer

本文档旨在指导开发者如何使用 Express 框架和 Multer 中间件，实现前端文件上传并保存到本地服务器的功能。我们将详细介绍前端 HTML 表单的配置，以及后端 Express 路由的处理，包括 Multer 的配置和使用，以及文件保存的实现。通过本教程，你将能够轻松地构建一个支持文件上传的 Web 应用。

前端 HTML 表单配置

首先，我们需要创建一个 HTML 表单，允许用户选择文件并上传。关键在于设置 enctype 属性为 multipart/form-data，这告诉浏览器使用 MIME 协议对表单数据进行编码，以便正确地上传文件。

action: 指定表单数据提交的 URL。
method: 设置为 POST，因为我们需要上传文件。
enctype="multipart/form-data": 确保浏览器以正确的方式编码表单数据，以便上传文件。
: 文件选择输入框，name 属性设置为 image，这个名称将在后端用于访问上传的文件。

后端 Express 配置和 Multer 中间件

在后端，我们需要使用 Express 框架处理上传请求。Multer 是一个 Node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它专门用于处理文件上传。

安装 Multer:

立即学习“前端免费学习笔记（深入）”；
```
npm install multer --save
```
引入 Multer 并配置:

三顾购物系统服装静态生成版
三顾购物系统分为服装版、鲜花版、化妆品版、时尚商务版等多个版本，本系统为服装版，并且支持静态生成，采用三顾购物平台，具备了所有购物网站的功能，应用于服装行业。此为生成静态版本，原动态版本地址： http://down.chinaz.com/soft/30332.htm 三顾购物系统使用说明：解压后将3gushop文件夹下的所有文件上传到支持ASPJPEG和ASPUpload组件的ASP空间

下载
```
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) // 使用原始文件名
    // 或者使用 Date.now() + '-' + file.originalname 生成唯一文件名
  }
})

const upload = multer({ storage: storage });
```
- multer.diskStorage(): 配置文件的存储方式。
  - destination: 指定文件存储的目录。
  - filename: 指定保存的文件名。可以使用原始文件名，也可以生成唯一的文件名。
- multer({ storage: storage }): 创建 Multer 实例，并传入配置。

处理上传请求:

app.post('/products', upload.single('image'), (req, res) => {
  // req.file 是 `image` 文件
  // req.body 将具有文本域数据，如果存在的话
  console.log(req.file); // 上传文件信息
  console.log(req.body); // 其他表单数据

  res.send('File uploaded successfully!');
});

upload.single('image'): 中间件，用于处理单个文件的上传，image 是前端 HTML 表单中 input 标签的 name 属性。
req.file: 包含上传文件的信息，例如文件名、文件大小、文件类型等。
req.body: 包含表单中的其他文本数据。

完整示例代码

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) // 使用原始文件名
    // 或者使用 Date.now() + '-' + file.originalname 生成唯一文件名
  }
})

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

app.use(express.static('public')); // 静态文件服务，用于访问上传的文件

app.post('/products', upload.single('image'), (req, res) => {
  console.log(req.file);
  console.log(req.body);
  res.send('File uploaded successfully!');
});

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

注意事项: