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

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

先決條件

在開(kāi)始之前，請(qǐng)確保您已安裝

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

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

---

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

首先為您的專案建立一個(gè)新目錄：

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

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

您可以透過(guò)執(zhí)行來(lái)安裝所有依賴項(xiàng)：

npm install express multer sharp cors 

建立必要的目錄

我們需要兩個(gè)目錄：

Original-image 用於儲(chǔ)存原始上傳的映像。
變換影像來(lái)儲(chǔ)存處理後的影像。

透過(guò)運(yùn)行來(lái)建立這些目錄：

mkdir original-image transform-image

---

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

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

Express.js 設(shè)定基本伺服器。在專案的根目錄中建立一個(gè)名為index.js的文件，並加入以下程式碼來(lái)設(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 允許跨域請(qǐng)求。
• express.json() 和 express.urlencoded() 用於解析傳入的請(qǐng)求資料。

---

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

我們將使用

Multer來(lái)處理檔案上傳。 Multer允許我們將上傳的檔案儲(chǔ)存在指定的目錄中。

加入以下程式碼來(lái)設(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è)定可確保：

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

---

步驟 4：建立檔案上傳端點(diǎn)

接下來(lái)，建立一個(gè)用於檔案上傳的

POST 端點(diǎn)。使用者將檔案?jìng)魉偷剿欧?，伺服器?huì)將檔案儲(chǔ)存在original-image目錄中。

加入以下程式碼來(lái)處理檔案上傳：

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

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

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

---

第5步：提供上傳的文件

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

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

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

此端點(diǎn)：

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

---

第 6 步：使用 Sharp 處理影像

Sharp 函式庫(kù)將允許我們對(duì)影像執(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步：?jiǎn)?dòng)伺服器

最後，加入以下程式碼啟動(dòng)伺服器：

mkdir original-image transform-image

這將在連接埠 3000 上啟動(dòng)伺服器。

---

第 8 步：測(cè)試伺服器

1. 使用Postman測(cè)試檔上傳

要使用 Postman 測(cè)試檔案上傳功能，請(qǐng)依照下列步驟操作：

1.1 打開(kāi)郵差

在您的電腦上啟動(dòng) Postman。如果您沒(méi)有安裝 Postman，可以在這裡下載。

1.2 建立POST請(qǐng)求

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

1.3 在Body中新增文件

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

1.4 發(fā)送請(qǐng)求

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

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

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

---

2. 透過(guò)瀏覽器測(cè)試影像檢索處理

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

2.1 取得上傳的圖片

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

npm install express multer sharp cors 

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

---

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

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

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

在瀏覽器中，將查詢參數(shù)附加到圖像 URL 以測(cè)試轉(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 時(shí)，伺服器將相應(yīng)地處理映像。
  • 如果映像之前已經(jīng)使用相同的參數(shù)進(jìn)行過(guò)處理，它將提供快取版本。
  • 如果尚未處理，它將處理圖像（調(diào)整大小，轉(zhuǎn)換格式，調(diào)整品質(zhì)）並將其保存在transform-image資料夾中以供將來(lái)請(qǐng)求。

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

---

範(fàn)例工作流程

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

---

結(jié)論

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

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