{"id":38350,"date":"2024-11-01T17:17:48","date_gmt":"2024-11-01T17:17:48","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=38350"},"modified":"2024-11-26T06:44:34","modified_gmt":"2024-11-26T06:44:34","slug":"express-%ea%b0%9c%eb%b0%9c-%ea%b0%95%ec%a2%8c-multer%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%ed%8c%8c%ec%9d%bc-%ec%97%85%eb%a1%9c%eb%93%9c-%ec%b2%98%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/38350\/","title":{"rendered":"Express \uac1c\ubc1c \uac15\uc88c, Multer\ub97c \uc774\uc6a9\ud55c \ud30c\uc77c \uc5c5\ub85c\ub4dc \ucc98\ub9ac"},"content":{"rendered":"

<\/p>\n

\ud604\ub300 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \uc0ac\uc6a9\uc790\uac00 \ud30c\uc77c\uc744 \uc5c5\ub85c\ub4dc\ud558\ub294 \uae30\ub2a5\uc774 \ud544\uc218\uc801\uc785\ub2c8\ub2e4. Node.js\ub97c \uae30\ubc18\uc73c\ub85c \ud55c Express \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc0ac\uc6a9\ud560 \ub54c, Multer\ub77c\ub294 \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \ud1b5\ud574 \ud30c\uc77c \uc5c5\ub85c\ub4dc\ub97c \uac04\ud3b8\ud558\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 Multer\uc758 \uc124\uce58\ubd80\ud130 \ud30c\uc77c \uc5c5\ub85c\ub4dc \ucc98\ub9ac, \uc624\ub958 \ucc98\ub9ac, \uc5c5\ub85c\ub4dc\ub41c \ud30c\uc77c \uad00\ub9ac\uae4c\uc9c0 \ub2e8\uacc4\ubcc4\ub85c \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. Multer\ub780?<\/h2>\n

Multer\ub294 Node.js\uc758 Express \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c \ud30c\uc77c \uc5c5\ub85c\ub4dc\ub97c \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \ub9cc\ub4e4\uc5b4\uc9c4 \ubbf8\ub4e4\uc6e8\uc5b4\uc785\ub2c8\ub2e4. Multipart\/form-data \ud615\uc2dd\uc73c\ub85c \uc804\uc1a1\ub41c \ud30c\uc77c\uc744 \uc27d\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. Multer\ub294 \ud30c\uc77c\uc758 \uba54\ud0c0\ub370\uc774\ud130\uc640 \ud30c\uc77c \uc790\uccb4\ub97c \uc694\uccad \uac1d\uccb4(request)\uc5d0 \ucd94\uac00\ud558\uc5ec, \uac1c\ubc1c\uc790\uac00 \uc774\ub97c \uac04\ud3b8\ud558\uac8c \ub2e4\ub8f0 \uc218 \uc788\ub3c4\ub85d \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n

2. Multer \uc124\uce58\ud558\uae30<\/h2>\n

\uc6b0\uc120, Multer\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 npm\uc744 \ud1b5\ud574 \ud574\ub2f9 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \ud130\ubbf8\ub110\uc5d0\uc11c \uc2e4\ud589\ud558\uc5ec Multer\ub97c \uc124\uce58\ud569\ub2c8\ub2e4:<\/p>\n

npm install multer<\/code><\/pre>\n
3. Multer \uc124\uc815\ud558\uae30<\/h2>\n
\ud30c\uc77c \uc5c5\ub85c\ub4dc\ub97c \uc2dc\uc791\ud558\uae30 \uc804\uc5d0 Multer\ub97c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. Multer\ub294 \ud30c\uc77c \uc800\uc7a5\uc18c\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\ub294 \uc5ec\ub7ec \uac00\uc9c0 \ubc29\ubc95\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ubc88 \uc608\uc81c\uc5d0\uc11c\ub294 \ud30c\uc77c\uc744 \ub514\uc2a4\ud06c\uc5d0 \uc800\uc7a5\ud558\ub294 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4. \uc544\ub798 \ucf54\ub4dc\ub97c \ucc38\uc870\ud574\uc8fc\uc138\uc694:<\/p>\n
const multer = require('multer');\n\n\/\/ \uc2a4\ud1a0\ub9ac\uc9c0 \uc124\uc815\nconst storage = multer.diskStorage({\n    destination: (req, file, cb) => {\n        cb(null, 'uploads\/'); \/\/ \uc5c5\ub85c\ub4dc\ub41c \ud30c\uc77c\uc744 \uc800\uc7a5\ud560 \ub514\ub809\ud1a0\ub9ac\n    },\n    filename: (req, file, cb) => {\n        cb(null, Date.now() + '-' + file.originalname); \/\/ \ud30c\uc77c \uc774\ub984 \uc124\uc815\n    }\n});\n\n\/\/ Multer \ubbf8\ub4e4\uc6e8\uc5b4 \uc124\uc815\nconst upload = multer({ storage: storage });<\/code><\/pre>\n
4. \ud30c\uc77c \uc5c5\ub85c\ub4dc \ucc98\ub9ac\ud558\uae30<\/h2>\n
\uc774\uc81c \uc5c5\ub85c\ub4dc\ub41c \ud30c\uc77c\uc744 \ucc98\ub9ac\ud560 API \ub77c\uc6b0\ud2b8\ub97c \uc0dd\uc131\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ube44\ub3d9\uae30 \ucc98\ub9ac \ubc0f \uc5d0\ub7ec \ucc98\ub9ac\ub97c \ud3ec\ud568\ud558\uc5ec \ucf54\ub4dc\ub97c \uc791\uc131\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
const express = require('express');\nconst app = express();\nconst port = 3000;\n\n\/\/ Multer \uc124\uc815 \ud3ec\ud568\ud558\uae30\nconst multer = require('multer');\nconst storage = multer.diskStorage({\n    destination: (req, file, cb) => {\n        cb(null, 'uploads\/'); \/\/ \uc5c5\ub85c\ub4dc \ub514\ub809\ud1a0\ub9ac\n    },\n    filename: (req, file, cb) => {\n        cb(null, Date.now() + '-' + file.originalname); \/\/ \ud30c\uc77c\uba85 \uc124\uc815\n    }\n});\nconst upload = multer({ storage: storage });\n\n\/\/ \ud30c\uc77c \uc5c5\ub85c\ub4dc \ub77c\uc6b0\ud2b8 \uc124\uc815\napp.post('\/upload', upload.single('file'), (req, res) => {\n    try {\n        res.send('\ud30c\uc77c \uc5c5\ub85c\ub4dc \uc131\uacf5: ' + req.file.filename); \/\/ \uc5c5\ub85c\ub4dc \uc131\uacf5 \uc2dc \uba54\uc2dc\uc9c0 \ubcf4\ub0b4\uae30\n    } catch (err) {\n        res.status(500).send('\ud30c\uc77c \uc5c5\ub85c\ub4dc \uc2e4\ud328: ' + err.message); \/\/ \uc5d0\ub7ec \uc2dc \uba54\uc2dc\uc9c0 \ubcf4\ub0b4\uae30\n    }\n});\n\n\/\/ \uc11c\ubc84 \uc2e4\ud589\napp.listen(port, () => {\n    console.log(`\uc11c\ubc84\uac00 http:\/\/localhost:${port}\uc5d0\uc11c \uc2e4\ud589 \uc911\uc785\ub2c8\ub2e4.`);\n});<\/code><\/pre>\n
5. HTML \ud30c\uc77c \uc5c5\ub85c\ub4dc \ud3fc \ub9cc\ub4e4\uae30<\/h2>\n
\uc774\uc81c \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \ud30c\uc77c\uc744 \uc5c5\ub85c\ub4dc\ud560 \uc218 \uc788\ub3c4\ub85d HTML \ud3fc\uc744 \uc791\uc131\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \uae30\ubcf8\uc801\uc778 \ud30c\uc77c \uc5c5\ub85c\ub4dc \ud3fc\uc785\ub2c8\ub2e4:<\/p>\n
<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\ud30c\uc77c \uc5c5\ub85c\ub4dc<\/title>\n<\/head>\n<body>\n    <h1>\ud30c\uc77c \uc5c5\ub85c\ub4dc<\/h1>\n    <form action=\"\/upload\" method=\"post\" enctype=\"multipart\/form-data\">\n        <input type=\"file\" name=\"file\" required>\n        <button type=\"submit\">\uc5c5\ub85c\ub4dc<\/button>\n    <\/form>\n<\/body>\n<\/html><\/code><\/pre>\n
6. \ud30c\uc77c \uc5c5\ub85c\ub4dc \ubc0f \uad00\ub9ac<\/h2>\n
\ud30c\uc77c\uc774 \uc5c5\ub85c\ub4dc\ub41c \ud6c4, \uc11c\ubc84\uc5d0\uc11c \uc5c5\ub85c\ub4dc\ub41c \ud30c\uc77c\uc744 \uad00\ub9ac\ud558\ub294 \ubc29\ubc95\ub3c4 \uace0\ub824\ud574\uc57c \ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790\uac00 \uc5c5\ub85c\ub4dc\ud55c \ud30c\uc77c\uc744 \ubaa9\ub85d\uc73c\ub85c \ubcf4\uc5ec\uc8fc\uac70\ub098, \uc0ad\uc81c\ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc5c5\ub85c\ub4dc\ub41c \ud30c\uc77c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub294 \uc608\uc2dc \ucf54\ub4dc\uc785\ub2c8\ub2e4:<\/p>\n
const fs = require('fs');\nconst path = require('path');\n\n\/\/ \uc5c5\ub85c\ub4dc\ub41c \ud30c\uc77c \ubaa9\ub85d \uac00\uc838\uc624\uae30 \ub77c\uc6b0\ud2b8\napp.get('\/files', (req, res) => {\n    const directoryPath = path.join(__dirname, 'uploads\/');\n\n    fs.readdir(directoryPath, (err, files) => {\n        if (err) {\n            return res.status(500).send('\ub514\ub809\ud1a0\ub9ac\ub97c \uc77d\ub294 \ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4: ' + err.message);\n        }\n        res.send(files); \/\/ \ud30c\uc77c \ubaa9\ub85d \uc751\ub2f5\n    });\n});<\/code><\/pre>\n
7. \ud30c\uc77c \ub2e4\uc6b4\ub85c\ub4dc \uae30\ub2a5 \ucd94\uac00\ud558\uae30<\/h2>\n
\uc5c5\ub85c\ub4dc\ub41c \ud30c\uc77c\uc744 \uc0ac\uc6a9\uc790\uac00 \ub2e4\uc6b4\ub85c\ub4dc\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \uac83\ub3c4 \uc911\uc694\ud569\ub2c8\ub2e4. \ub2e4\uc74c \ucf54\ub4dc\ub294 \uc0ac\uc6a9\uc790\uac00 \ud2b9\uc815 \ud30c\uc77c\uc744 \ub2e4\uc6b4\ub85c\ub4dc\ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \ucd94\uac00\ud55c \uac83\uc785\ub2c8\ub2e4:<\/p>\n
app.get('\/files\/:filename', (req, res) => {\n    const file = path.join(__dirname, 'uploads\/', req.params.filename);\n    res.download(file, (err) => {\n        if (err) {\n            res.status(500).send('\ud30c\uc77c \ub2e4\uc6b4\ub85c\ub4dc \uc2e4\ud328: ' + err.message);\n        }\n    });\n});<\/code><\/pre>\n
8. \uc5d0\ub7ec \ucc98\ub9ac \ubc0f \uac80\uc99d<\/h2>\n
\ud30c\uc77c \uc5c5\ub85c\ub4dc \uc2dc \ud30c\uc77c \uc720\ud615\uc774\ub098 \ud06c\uae30\ub97c \uc81c\ud55c\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 Multer\uc758 \uc635\uc158\uc744 \ud65c\uc6a9\ud574\uc11c \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \ud30c\uc77c\uc774 \uc774\ubbf8\uc9c0 \ud615\uc2dd\uc778\uc9c0 \ud655\uc778\ud558\uace0, \ud06c\uae30\ub97c 1MB\ub85c \uc81c\ud55c\ud558\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4:<\/p>\n
const fileFilter = (req, file, cb) => {\n    const allowedTypes = ['image\/png', 'image\/jpg', 'image\/jpeg', 'image\/gif'];\n    if (allowedTypes.includes(file.mimetype)) {\n        cb(null, true); \/\/ \ud5c8\uc6a9\ub41c \ud0c0\uc785\n    } else {\n        cb(new Error('\ud5c8\uc6a9\ub418\uc9c0 \uc54a\ub294 \ud30c\uc77c \ud615\uc2dd\uc785\ub2c8\ub2e4.'), false); \/\/ \ud5c8\uc6a9\ub418\uc9c0 \uc54a\ub294 \ud0c0\uc785\n    }\n};\n\nconst upload = multer({\n    storage: storage,\n    limits: { fileSize: 1 * 1024 * 1024 }, \/\/ \ud06c\uae30 \uc81c\ud55c (1MB)\n    fileFilter: fileFilter \/\/ \ud30c\uc77c \ud544\ud130\n});<\/code><\/pre>\n
9. \ubcf4\uc548 \ubb38\uc81c \uace0\ub824\ud558\uae30<\/h2>\n
\ud30c\uc77c \uc5c5\ub85c\ub4dc \uae30\ub2a5\uc744 \uad6c\ud604\ud560 \ub54c\ub294 \ubcf4\uc548 \ubb38\uc81c \ub610\ud55c consideration\ud560 \ud544\uc694\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc545\uc131 \ucf54\ub4dc\ub97c \ud3ec\ud568\ud55c \ud30c\uc77c\uc744 \uc5c5\ub85c\ub4dc\ud560 \uc218 \uc788\ub3c4\ub85d \ubc29\uc9c0\ud558\uae30 \uc704\ud574, \ud30c\uc77c \uac80\uc99d \ubc0f \uc2a4\ud1a0\ub9ac\uc9c0 \uc124\uc815\uc744 \uc2e0\uc911\ud788 \ud574\uc57c \ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc5c5\ub85c\ub4dc\ub41c \ud30c\uc77c\uc740 \uc11c\ubc84\uc758 \ud2b9\uc815 \uc704\uce58\uc5d0\ub9cc \uc800\uc7a5\ud558\uace0, \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc9c1\uc811 \uc811\uadfc\ud560 \uc218 \uc5c6\ub294 \ud658\uacbd\uc744 \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
10. \uacb0\ub860<\/h2>\n
\uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 Express \ud504\ub808\uc784\uc6cc\ud06c\uc640 Multer\ub97c \uc774\uc6a9\ud55c \ud30c\uc77c \uc5c5\ub85c\ub4dc \ucc98\ub9ac \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc778 \uc5c5\ub85c\ub4dc \uae30\ub2a5 \uad6c\ud604\ubd80\ud130 \ud30c\uc77c \uad00\ub9ac, \uc5d0\ub7ec \ucc98\ub9ac \ubc0f \ubcf4\uc548 \ubb38\uc81c\uae4c\uc9c0 \ub2e4\ub8e8\uc5c8\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uae30\ub2a5\ub4e4\uc744 \uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc801\uc6a9\ud558\uc5ec \ub354\uc6b1 \ubc1c\uc804\ub41c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\uc138\uc694!<\/p>\n
\ucc38\uace0 \uc790\ub8cc<\/h3>\n