iT邦幫忙

2024 iThome 鐵人賽

DAY 11
0
自我挑戰組

利用 node.js/express 架設網站系列 第 11

Day-11 文件上傳與處理

  • 分享至 

  • xImage
  •  

今天要來學習和文件相關的功能
1.文件上傳的基礎
2.文件驗證與限制
3.存儲文件

安裝Multer進行文件上傳

  • 在 Express 應用中,Multer 是一個處理 multipart/form-data(主要用於文件上傳)的中介軟體。我們需要先安裝它來處理文件上傳。
    1.安裝Multer:
npm install multer

2.配置Multer:
範例:

const multer = require('multer');

// 設置存儲方式,文件將保存到 'uploads/' 文件夾
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'uploads/');
    },
    filename: (req, file, cb) => {
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, file.fieldname + '-' + uniqueSuffix);
    }
});

const upload = multer({ storage: storage });

// 創建文件上傳路由
app.post('/upload', upload.single('file'), (req, res) => {
    // 'file' 是表單中的文件字段名稱
    res.send('File uploaded successfully');
});

這段程式碼會將上傳的文件保存到伺服器的 uploads 目錄中,並給文件生成一個唯一名稱來避免文件名衝突。

處理多個文件上傳

1.多文件上傳:
範例:

app.post('/upload-multiple', upload.array('files', 5), (req, res) => {
    // 'files' 是表單中的文件字段名稱,允許最多上傳 5 個文件
    res.send('Files uploaded successfully');
});

設置文件大小限制與類型驗證

為了保證應用的安全性和性能,應該限制文件的大小並驗證文件類型。Multer 提供了方便的選項來設定這些限制。
1.文件大小限制:
範例:限制文件大小為 2MB

const uploadWithSizeLimit = multer({
    storage: storage,
    limits: { fileSize: 2 * 1024 * 1024 } // 2MB
});

2.驗證文件類型:
範例:只允許上傳圖片文件(jpg、png)

const uploadWithFileFilter = multer({
    storage: storage,
    fileFilter: (req, file, cb) => {
        if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
            cb(null, true);
        } else {
            cb(new Error('Only .jpg and .png files are allowed!'));
        }
    }
});

將文件上傳至雲端存儲

在某些情況下,可能需要將上傳的文件存儲到雲端服務(如 AWS S3),而不是本地伺服器。這樣可以提高可擴展性和文件管理的靈活性。
1.安裝AWS SDK

npm install aws-sdk multer-s3

2.將文件上傳到 AWS S3
範例:

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

// 配置 AWS S3
aws.config.update({
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
    region: 'us-east-1'
});

const s3 = new aws.S3();

const uploadToS3 = multer({
    storage: multerS3({
        s3: s3,
        bucket: 'my-bucket-name',
        key: (req, file, cb) => {
            cb(null, Date.now().toString() + '-' + file.originalname);
        }
    })
});

app.post('/upload-to-s3', uploadToS3.single('file'), (req, res) => {
    res.send('File uploaded to S3 successfully');
});

這段代碼會將文件上傳到 AWS S3 的指定存儲桶中,並生成唯一的文件名稱。

處理上傳文件的其他操作

除了上傳文件,你還可能需要對文件進行其他操作,如:

  • 刪除文件:從伺服器或 S3 中刪除文件。
  • 下載文件:讓用戶可以下載他們上傳的文件。
    範例:刪除本地文件
const fs = require('fs');

app.delete('/delete-file/:filename', (req, res) => {
    const filePath = `uploads/${req.params.filename}`;
    fs.unlink(filePath, (err) => {
        if (err) {
            return res.status(500).send('File deletion failed');
        }
        res.send('File deleted successfully');
    });
});

上一篇
Day-10 用戶驗證與授權
下一篇
Day-12 中介軟體與錯誤處理
系列文
利用 node.js/express 架設網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言