在本教學中，我們將向您展示如何使用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中文網其他相關文章！
