首頁 > web前端 > js教程 > 使用 Multer 在 Node.js 中處理檔案上傳:綜合指南

使用 Multer 在 Node.js 中處理檔案上傳:綜合指南

Mary-Kate Olsen
發布: 2024-11-18 10:02:02
原創
484 人瀏覽過

Handling File Uploads in Node.js with Multer: A Comprehensive Guide

在 Web 開發領域,處理文件上傳是常見要求。無論是個人資料圖片、文件還是圖像,許多應用程式都需要安全且有效率地上傳和儲存文件。將 Node.js 與 Express 結合使用時,Multer 是可順利處理此任務的最佳函式庫之一。

在本部落格中,我們將介紹有關在 Node.js 中使用 Multer 所需了解的所有信息,包括安裝、配置、存儲選項、文件過濾以及常見用例和程式碼範例。


目錄

  1. 什麼是 Multer?
  2. 安裝
  3. 使用 Express 設定 Multer
  4. 了解儲存選項
    • 磁碟儲存
    • 記憶體儲存
    • 雲端儲存(S3 範例)
  5. 依型別過濾檔案
  6. 限製檔案大小
  7. 處理多個檔案上傳
  8. Multer 中的錯誤處理
  9. 現實世界用例
  10. 結論

穆爾特是什麼?

Multer 是用來處理 multipart/form-data 的中間件,multipart/form-data 是 Web 應用程式中上傳檔案的常用格式。它專門設計用於與 Express 配合使用,並透過提供以下功能來幫助管理文件上傳:

  • 檔案儲存:可設定的儲存選項,用於將檔案儲存在伺服器或其他儲存服務上。
  • 檔案過濾:允許對檔案類型設定限制。
  • 大小限制:幫助限製檔案大小以防止上傳過多的資料。

安裝

要開始使用 Multer,請透過 npm 安裝它:

npm install multer
登入後複製
登入後複製

使用 Express 設定 Multer

讓我們先在 Express 應用程式中使用 Multer 設定基本檔案上傳處理程序。開始方法如下:

const express = require('express');
const multer = require('multer');
const app = express();

// Configure Multer for basic usage
const upload = multer({ dest: 'uploads/' }); // Destination folder for uploaded files

// Single File Upload Route
app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded successfully!');
});

app.listen(3000, () => console.log('Server running on port 3000'));
登入後複製
登入後複製

在此範例中:

  • upload.single('file'): 此中間件處理使用金鑰檔案上傳的單一檔案。
  • 上傳的檔案將儲存在uploads/資料夾中。

了解儲存選項

Multer 提供兩種主要儲存選項:

  1. 磁碟儲存:將檔案儲存在伺服器本機。
  2. 記憶體儲存:將檔案儲存為Buffer物件在記憶體中(對於處理記憶體中的檔案很有用)。

1. 磁碟存儲

磁碟儲存提供了對檔案命名和目標路徑的更多控制。

npm install multer
登入後複製
登入後複製
  • destination:指定檔案上傳的資料夾。
  • 檔案名稱:允許自訂檔案名稱(例如,新增時間戳記以確保唯一性)。

2. 內存存儲

在記憶體儲存中,檔案被儲存為緩衝區,這對於短期檔案或在不將檔案儲存到磁碟的情況下處理上傳非常有用。

const express = require('express');
const multer = require('multer');
const app = express();

// Configure Multer for basic usage
const upload = multer({ dest: 'uploads/' }); // Destination folder for uploaded files

// Single File Upload Route
app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded successfully!');
});

app.listen(3000, () => console.log('Server running on port 3000'));
登入後複製
登入後複製

雲端儲存:Multer 與 AWS S3

對於生產應用程序,將檔案直接儲存在雲端儲存(如 AWS S3)上通常更可取。若要與 S3 集成,請使用 multer-s3。

const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, 'uploads/'), // Folder location
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, uniqueSuffix + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage });
登入後複製
const upload = multer({ storage: multer.memoryStorage() });
登入後複製

此設定將繞過本機存儲,直接將檔案上傳到指定的 S3 儲存桶。


按類型過濾文件

您可以按類型過濾文件以僅接受特定的文件格式(例如圖像)。使用檔案過濾選項。

npm install aws-sdk multer-s3
登入後複製

限製檔案大小

要防止上傳大文件,請設定限制選項。以下是將檔案大小限制為 1MB 的方法:

const aws = require('aws-sdk');
const multerS3 = require('multer-s3');

aws.config.update({ region: 'your-region' });

const s3 = new aws.S3();

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'your-s3-bucket-name',
    metadata: (req, file, cb) => cb(null, { fieldName: file.fieldname }),
    key: (req, file, cb) => cb(null, Date.now().toString() + '-' + file.originalname)
  })
});
登入後複製

處理多個文件上傳

Multer也支援多個檔案上傳:

const fileFilter = (req, file, cb) => {
  // Accept only image files
  if (file.mimetype.startsWith('image/')) {
    cb(null, true); // Accept file
  } else {
    cb(new Error('Only image files are allowed!'), false); // Reject file
  }
};

const upload = multer({
  storage: storage,
  fileFilter: fileFilter
});
登入後複製
  • upload.array('files', 5): 同一欄位下最多允許上傳5個檔案。
  • upload.fields:允許處理具有不同欄位名稱的檔案。

Multer 中的錯誤處理

正確的錯誤處理對於流暢的使用者體驗至關重要。 Multer 可以拋出多種類型的錯誤,您可以像這樣處理:

const upload = multer({
  storage: storage,
  limits: { fileSize: 1 * 1024 * 1024 } // 1 MB limit
});
登入後複製

現實世界的用例

以下是使用 Multer 的一些實際應用:

  1. 個人資料圖片上傳:允許使用者上傳個人資料圖片,將其儲存在伺服器或S3中,並將檔案路徑保存在資料庫中。
  2. 文件儲存:使用自訂儲存和篩選配置儲存使用者提交的文件(例如履歷、PDF)。
  3. 電子商務中的媒體檔案:允許供應商上傳產品圖片,限製檔案類型和大小,並將其儲存在雲端儲存中以便於檢索。

結論

Multer 透過提供靈活的儲存選項、檔案過濾以及處理從單一檔案到多個檔案的各種上傳要求,簡化了 Node.js 應用程式中的檔案處理。無論您是建立小型應用程式還是具有檔案處理需求的生產級應用程序,Multer 都能滿足您的需求。

編碼快樂! ?

以上是使用 Multer 在 Node.js 中處理檔案上傳:綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板