在 Express 框架中上传图片：一劳永逸的解决方案

2023-11-23 17:15:45

写在前面

在现代 Web 开发中，文件上传是一个常见需求。无论是博客中的文章配图、电商平台的产品图片，还是社交媒体上的个人头像，都需要通过上传来实现。在 Express 框架中，处理文件上传通常使用 body-parser 中间件，然而，body-parser 不能处理 multipart/form-data 类型的请求，而图片上传正是属于这种类型。因此，我们需要引入专门处理文件上传的 multer 中间件。

multer 简介

multer 是一个 Express 中间件，专门用于处理 multipart/form-data 类型的数据。它可以轻松地解析上传的文件，并将其存储在指定的位置。multer 提供了许多选项来配置上传过程，包括文件大小限制、允许的文件类型和存储目录等。

安装 multer

首先，在您的项目中安装 multer：

npm install multer

使用 multer 处理图片上传

安装好 multer 之后，您就可以在 Express 应用中使用它来处理图片上传了。以下是一个简单的示例：

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

const app = express();

// 设置 multer 的存储配置
const storage = multer.diskStorage({
  destination: './uploads/',
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

// 创建 multer 实例
const upload = multer({ storage: storage });

// 使用 multer 处理图片上传
app.post('/upload-image', upload.single('image'), (req, res) => {
  // 上传成功后，将图片的路径返回给客户端
  res.json({ path: req.file.path });
});