构建用于动态文件上传和动态图像处理的 Express Web 应用程序

指南：构建用于文件上传和动态图像处理的 Express Web 应用程序

在本教程中，我们将向您展示如何使用 Express.js 构建一个服务器，该服务器处理文件上传并使用 Sharp.

先决条件

在开始之前，请确保您已安装

Node.js 和 npm。我们将在本教程中使用以下库：

1. Express.js - 用于设置服务器。
2. Multer - 用于处理文件上传。
3. Sharp - 用于图像处理。
4. CORS - 允许跨域请求。

---

第 1 步：设置项目

首先为您的项目创建一个新目录：

mkdir image-upload-server
cd image-upload-server
npm init -y

这将创建一个新的项目文件夹并初始化 package.json 文件。

您可以通过运行来安装所有依赖项：

npm install express multer sharp cors 

创建必要的目录

我们需要两个目录：

Original-image 用于存储原始上传的图像。
变换图像来存储处理后的图像。

通过运行创建这些目录：

mkdir original-image transform-image

---

第 2 步：设置 Express 服务器

现在，让我们使用

Express.js 设置基本服务器。在项目的根目录中创建一个名为index.js的文件，并添加以下代码来设置服务器：

const express = require('express');
const cors = require('cors');
const multer = require('multer');
const path = require('path');
const sharp = require('sharp');
const fs = require('fs');

const app = express();

// Middleware for CORS and JSON parsing
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

此基本设置包括：

• CORS 允许跨域请求。
• express.json() 和 express.urlencoded() 用于解析传入的请求数据。

---

步骤 3：配置 Multer 进行文件上传

我们将使用

Multer来处理文件上传。 Multer允许我们将上传的文件存储在指定的目录中。

添加以下代码来配置

Multer:

// Configure multer for file storage
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'original-image'); // Ensure the 'original-image' directory exists
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
  }
});

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

此设置可确保：

上传的文件存储在original-image文件夹中。
每个文件都会根据当前时间戳和随机数获得一个唯一的名称。

---

步骤 4：创建文件上传端点

接下来，创建一个用于文件上传的

POST 端点。用户将文件发送到服务器，服务器会将文件存储在original-image目录中。

添加以下代码来处理文件上传：

// File upload endpoint
app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).send({ message: 'Please select a file.' });
  }
  const url = `http://localhost:3000/${file.filename}`;

  // Store file path with original filename as the key
  db.set(file.filename, file.path);

  res.json({
    message: 'File uploaded successfully.',
    url: url
  });
});

此端点执行以下操作：

• 接收单个文件上传（带有字段名称文件）。
• 返回上传文件的 URL。

---

第5步：提供上传的文件

现在，让我们创建一个 GET 端点来提供上传的文件。如果提供任何查询参数（例如调整大小、格式转换），服务器将相应地处理图像。

添加以下代码来服务上传的文件：

mkdir image-upload-server
cd image-upload-server
npm init -y

此端点：

• 根据文件名从数据库映射中检索文件。
• 如果指定了调整大小、格式转换或质量调整，则处理图像。
• 缓存处理后的图像以提高性能。

---

第 6 步：使用 Sharp 处理图像

Sharp 库将允许我们对图像执行各种转换，例如调整大小、格式转换和质量调整。

添加处理这些转换的 processImage 函数：

npm install express multer sharp cors 

此功能：

• 根据 h（高度）和 w（宽度）参数调整图像大小。
• 根据f参数转换图像格式（JPEG、PNG、WebP等）。
• 根据 q 参数调整图像质量（可选）。
• 将处理后的图像保存在transform-image文件夹中。

---

第7步：启动服务器

最后，添加以下代码启动服务器：

mkdir original-image transform-image

这将在端口 3000 上启动服务器。

---

第 8 步：测试服务器

1. 使用Postman测试文件上传

要使用 Postman 测试文件上传功能，请按照以下步骤操作：

1.1 打开邮递员

在您的计算机上启动 Postman。如果您没有安装 Postman，可以在这里下载。

1.2 创建POST请求

• 将请求类型设置为POST。
• 在URL字段中，输入：http://localhost:3000/upload。

1.3 在Body中添加文件

• 选择正文选项卡。
• 选择表单数据选项。
• 在表单中，将键设置为 file（这必须与您的 multer 配置中的字段名称匹配）。
• 单击选择文件按钮并从您的计算机中选择图像文件。

1.4 发送请求

• 点击发送。
• 如果上传成功，您应该会收到包含上传图像 URL 的响应。

响应示例：

mkdir image-upload-server
cd image-upload-server
npm init -y

---

2. 通过浏览器测试图像检索和处理

现在，让我们测试使用浏览器检索经过转换的图像。

2.1 获取上传的图片

要检索图像，只需打开浏览器并导航到上传文件后收到的 URL。例如，如果响应 URL 为：

npm install express multer sharp cors 

只需在浏览器的地址栏中输入此 URL，然后按 Enter。您应该会看到显示的原始图像。

---

3. 使用查询参数测试图像转换

现在，让我们通过附加用于调整大小、格式转换和质量调整的查询参数来测试动态图像转换。

3.1 添加查询参数进行转换

在浏览器中，将查询参数附加到图像 URL 以测试转换。以下是一些示例：

• 将图像大小调整为宽度 200px、高度 300px：

mkdir original-image transform-image

• 将图像转换为PNG格式：

const express = require('express');
const cors = require('cors');
const multer = require('multer');
const path = require('path');
const sharp = require('sharp');
const fs = require('fs');

const app = express();

// Middleware for CORS and JSON parsing
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

• 将图像转换为 WebP 格式，质量为 90%：

// Configure multer for file storage
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'original-image'); // Ensure the 'original-image' directory exists
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
  }
});

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

• 将图像大小调整为宽度 400px、高度 500px，并转换为 80% 质量的 JPEG：

// File upload endpoint
app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).send({ message: 'Please select a file.' });
  }
  const url = `http://localhost:3000/${file.filename}`;

  // Store file path with original filename as the key
  db.set(file.filename, file.path);

  res.json({
    message: 'File uploaded successfully.',
    url: url
  });
});

3.2 预期行为

• 当您访问任何带有查询参数的 URL 时，服务器将相应地处理图像。
  • 如果图像之前已经使用相同的参数进行过处理，它将提供缓存版本。
  • 如果尚未处理，它将处理图像（调整大小，转换格式，调整质量）并将其保存在transform-image文件夹中以供将来请求。

浏览器将显示处理后的图像，您可以确认转换是否已正确应用。

---

示例工作流程

1. 通过 Postman 上传图片。
2. 使用 Postman 提供的 URL 在浏览器中检索上传的图像。
3. 在浏览器中修改 URL，添加查询参数，例如 ?h=300&w=200 以查看实际调整大小或 ?f=webp&q=90 以进行格式转换。

---

结论

该图像上传和处理服务器为处理图像上传、转换和检索提供了强大的解决方案。使用 Multer 进行文件处理，使用 Sharp 进行图像处理，支持通过查询参数调整大小、格式转换和质量调整。该系统有效地缓存处理后的图像以优化性能，确保快速、响应灵敏的图像传输。这种方法简化了需要动态图像转换的应用程序的图像管理，使其成为开发人员的多功能工具。

以上是构建用于动态文件上传和动态图像处理的 Express Web 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！