指南：建立用於檔案上傳和動態(tài)映像處理的 Express Web 應(yīng)用程式

在本教學(xué)中，我們將向您展示如何使用Express.js 建立一個伺服器，該伺服器處理檔案上傳並使用Sharp.

先決條件

在開始之前，請確保您已安裝

Node.js 和 npm。我們將在本教程中使用以下函式庫：

1. Express.js - 用於設(shè)定伺服器。
2. Multer - 用於處理檔案上傳。
3. Sharp - 用於影像處理。
4. CORS - 允許跨域請求。

---

第 1 步：設(shè)定項目

首先為您的專案建立一個新目錄：

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

這將建立一個新的專案資料夾並初始化 package.json 檔案。

您可以透過執(zhí)行來安裝所有依賴項：

npm install express multer sharp cors 

建立必要的目錄

我們需要兩個目錄：

Original-image 用於儲存原始上傳的映像。
變換影像來儲存處理後的影像。

透過運行來建立這些目錄：

mkdir original-image transform-image

---

第 2 步：設(shè)定 Express 伺服器

現(xiàn)在，讓我們使用

Express.js 設(shè)定基本伺服器。在專案的根目錄中建立一個名為index.js的文件，並加入以下程式碼來設(shè)定伺服器：

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 }));

此基本設(shè)定包括：

• CORS 允許跨域請求。
• express.json() 和 express.urlencoded() 用於解析傳入的請求資料。

---

步驟 3：設(shè)定 Multer 進行檔案上傳

我們將使用

Multer來處理檔案上傳。 Multer允許我們將上傳的檔案儲存在指定的目錄中。

加入以下程式碼來設(shè)定

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 });

此設(shè)定可確保：

上傳的檔案儲存在original-image資料夾中。
每個檔案都會根據(jù)當(dāng)前時間戳記和隨機數(shù)獲得一個唯一的名稱。

---

步驟 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
  });
});

此端點執(zhí)行下列操作：

• 接收單一檔案上傳（帶有欄位名稱檔案）。
• 返回上傳文件的 URL。

---

第5步：提供上傳的文件

現(xiàn)在，讓我們建立一個 GET 端點來提供上傳的檔案。如果提供任何查詢參數(shù)（例如調(diào)整大小、格式轉(zhuǎn)換），伺服器將相應(yīng)地處理映像。

加入以下程式碼來服務(wù)上傳的檔案：

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

此端點：

• 根據(jù)檔案名稱從資料庫對應(yīng)檢索檔案。
• 如果指定了調(diào)整大小、格式轉(zhuǎn)換或品質(zhì)調(diào)整，則處理影像。
• 快取處理後的影像以提高效能。

---

第 6 步：使用 Sharp 處理影像

Sharp 函式庫將允許我們對影像執(zhí)行各種轉(zhuǎn)換，例如調(diào)整大小、格式轉(zhuǎn)換和品質(zhì)調(diào)整。

加入處理這些轉(zhuǎn)換的 processImage 函數(shù)：

npm install express multer sharp cors 

此功能：

• 根據(jù) h（高度）和 w（寬度）參數(shù)調(diào)整影像大小。
• 根據(jù)f參數(shù)轉(zhuǎn)換影像格式（JPEG、PNG、WebP等）。
• 根據(jù) q 參數(shù)調(diào)整影像品質(zhì)（可選）。
• 將處理後的影像保存在transform-image資料夾中。

---

第7步：啟動伺服器

最後，加入以下程式碼啟動伺服器：

mkdir original-image transform-image

這將在連接埠 3000 上啟動伺服器。

---

第 8 步：測試伺服器

1. 使用Postman測試檔上傳

要使用 Postman 測試檔案上傳功能，請依照下列步驟操作：

1.1 打開郵差

在您的電腦上啟動 Postman。如果您沒有安裝 Postman，可以在這裡下載。

1.2 建立POST請求

• 將請求類型設(shè)定為POST。
• 在URL欄位中，輸入：http://localhost:3000/upload。

1.3 在Body中新增文件

• 選擇正文選項卡。
• 選擇表單資料選項。
• 在表單中，將鍵設(shè)為 file（這必須與您的 multer 配置中的欄位名稱相符）。
• 點擊選擇檔案按鈕並從您的電腦中選擇圖像檔案。

1.4 發(fā)送請求

• 點選發(fā)送。
• 如果上傳成功，您應(yīng)該會收到包含上傳圖像 URL 的回應(yīng)。

回應(yīng)範(fàn)例：

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

---

2. 透過瀏覽器測試影像檢索處理

現(xiàn)在，讓我們測試使用瀏覽器來擷取轉(zhuǎn)換後的影像。

2.1 取得上傳的圖片

要檢索圖像，只需打開瀏覽器並導(dǎo)航到上傳文件後收到的 URL。例如，如果回應(yīng) URL 為：

npm install express multer sharp cors 

只需在瀏覽器的網(wǎng)址列中輸入此 URL，然後按 Enter。您應(yīng)該會看到顯示的原始影像。

---

3. 使用查詢參數(shù)測試影像轉(zhuǎn)換

現(xiàn)在，讓我們透過附加用於調(diào)整大小、格式轉(zhuǎn)換和品質(zhì)調(diào)整的查詢參數(shù)來測試動態(tài)影像轉(zhuǎn)換。

3.1 新增查詢參數(shù)進行轉(zhuǎn)換

在瀏覽器中，將查詢參數(shù)附加到圖像 URL 以測試轉(zhuǎn)換。以下是一些例子：

• 將影像大小調(diào)整為寬度 200px、高度 300px：

mkdir original-image transform-image

• 將影像轉(zhuǎn)換為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 }));

• 將影像轉(zhuǎn)換為 WebP 格式，品質(zhì)為 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 });

• 將影像大小調(diào)整為寬度 400px、高度 500px，並轉(zhuǎn)換為 80% 品質(zhì)的 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 預(yù)期行為

• 當(dāng)您造訪任何帶有查詢參數(shù)的 URL 時，伺服器將相應(yīng)地處理映像。
  • 如果映像之前已經(jīng)使用相同的參數(shù)進行過處理，它將提供快取版本。
  • 如果尚未處理，它將處理圖像（調(diào)整大小，轉(zhuǎn)換格式，調(diào)整品質(zhì)）並將其保存在transform-image資料夾中以供將來請求。

瀏覽器將顯示處理後的影像，您可以確認轉(zhuǎn)換是否已正確套用。

---

範(fàn)例工作流程

1. 透過 Postman 上傳圖片。
2. 使用 Postman 提供的 URL 在瀏覽器中檢索上傳的圖像。
3. 在瀏覽器中修改 URL，新增查詢參數(shù)，例如 ?h=300&w=200 以查看實際調(diào)整大小或 ?f=webp&q=90 以進行格式轉(zhuǎn)換。

---

結(jié)論

此映像上傳和處理伺服器為處理影像上傳、轉(zhuǎn)換和檢索提供了強大的解決方案。使用 Multer 進行檔案處理，使用 Sharp 進行影像處理，支援透過查詢參數(shù)調(diào)整大小、格式轉(zhuǎn)換和品質(zhì)調(diào)整。該系統(tǒng)有效地快取處理後的圖像以優(yōu)化性能，確?？焖?、響應(yīng)靈敏的圖像傳輸。這種方法簡化了需要動態(tài)影像轉(zhuǎn)換的應(yīng)用程式的影像管理，使其成為開發(fā)人員的多功能工具。

以上是建立用於動態(tài)檔案上傳和動態(tài)映像處理的 Express Web 應(yīng)用程式的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！