在本教程中，我们将向您展示如何使用 Express.js 构建一个服务器，该服务器处理文件上传并使用 Sharp.
先决条件Node.js 和 npm。我们将在本教程中使用以下库：
mkdir image-upload-server cd image-upload-server npm init -y
您可以通过运行来安装所有依赖项：
npm install express multer sharp cors
mkdir original-image transform-image
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 }));
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 });
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
});
});
现在，让我们创建一个 GET 端点来提供上传的文件。如果提供任何查询参数（例如调整大小、格式转换），服务器将相应地处理图像。
添加以下代码来服务上传的文件：
mkdir image-upload-server cd image-upload-server npm init -y
此端点：
Sharp 库将允许我们对图像执行各种转换，例如调整大小、格式转换和质量调整。
添加处理这些转换的 processImage 函数：
npm install express multer sharp cors
此功能：
最后，添加以下代码启动服务器：
mkdir original-image transform-image
这将在端口 3000 上启动服务器。
要使用 Postman 测试文件上传功能，请按照以下步骤操作：
在您的计算机上启动 Postman。如果您没有安装 Postman，可以在这里下载。
响应示例：
mkdir image-upload-server cd image-upload-server npm init -y
现在，让我们测试使用浏览器检索经过转换的图像。
要检索图像，只需打开浏览器并导航到上传文件后收到的 URL。例如，如果响应 URL 为：
npm install express multer sharp cors
只需在浏览器的地址栏中输入此 URL，然后按 Enter。您应该会看到显示的原始图像。
现在，让我们通过附加用于调整大小、格式转换和质量调整的查询参数来测试动态图像转换。
在浏览器中，将查询参数附加到图像 URL 以测试转换。以下是一些示例：
mkdir original-image transform-image
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 }));
// 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 });
// 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
});
});
浏览器将显示处理后的图像，您可以确认转换是否已正确应用。
该图像上传和处理服务器为处理图像上传、转换和检索提供了强大的解决方案。使用 Multer 进行文件处理，使用 Sharp 进行图像处理，支持通过查询参数调整大小、格式转换和质量调整。该系统有效地缓存处理后的图像以优化性能，确保快速、响应灵敏的图像传输。这种方法简化了需要动态图像转换的应用程序的图像管理，使其成为开发人员的多功能工具。
以上是构建用于动态文件上传和动态图像处理的 Express Web 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！
