基于 Node.js Express 和 Multer 实现图片上传

前端

2024-01-05 06:56:17

在当今数据驱动的世界中，图像已成为不可或缺的信息传递方式。无论是社交媒体帖子、电子商务网站还是企业演示文稿，图像都能够提升用户体验并传达复杂的信息。

为了在 Node.js 应用程序中实现图像上传功能，Express.js 和 Multer 这两个强大的库脱颖而出。本文将引导您完成使用这两个库实现基于 Node.js Express 的 multer 图片上传 demo 的分步指南。

前提条件

在继续之前，请确保您的系统已安装以下先决条件：

Node.js（版本 8 或更高）
npm（Node.js 包管理器）
数据库（例如 MySQL 或 MongoDB）

Express.js 设置

Express.js 是一个轻量级且灵活的 Node.js 框架，用于构建 web 应用程序。要安装 Express.js，请运行以下命令：

npm install express

创建一个名为 app.js 的新文件，并添加以下代码：

const express = require('express');
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.listen(3000, () => console.log('Express server running on port 3000'));

这将创建一个 Express.js 服务器，侦听端口 3000。

Multer 设置

Multer 是一个 Express.js 中间件，用于处理文件上传。要安装 Multer，请运行：

npm install multer

在 app.js 文件中，导入 Multer 并设置 multer 中间件：

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('image'), (req, res) => {
  console.log(req.file);
  res.send('Image uploaded successfully');
});

这将创建一个 multer 中间件，它将处理对 /upload 路由的 POST 请求。它还将存储上传的图像文件在 uploads/ 目录中。

数据库连接

现在您已经设置了 Express.js 和 Multer，是时候连接到数据库了。对于本 demo，我们将使用 MySQL。请按照以下步骤操作：

安装 MySQL 客户端：npm install mysql
在 app.js 文件中，导入 MySQL 客户端并连接到数据库：

const mysql = require('mysql');
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'mydb'
});
connection.connect();

路由

现在您已经连接到数据库，可以设置用于将图像数据插入数据库的路由：

app.post('/save-image', (req, res) => {
  const image = req.file;
  const query = 'INSERT INTO images (name, data) VALUES (?, ?)';
  connection.query(query, [image.originalname, image.buffer], (err, result) => {
    if (err) throw err;
    res.send('Image saved successfully');
  });
});