npm install multer

카테고리 없음

npm install multer

Canyi 2022. 11. 24. 16:44

npm install multer

이미지 업로드

MongoDBWebserver.js

multer 설정

//multer 설정
let multer = require('multer');
let storage = multer.diskStorage({
    destination : function (req, res, cb){
        cb(null, './public/image');
    },
    filename: function(req,file,cb){
        cb(null, file.originalname);
    } 
})

업로드한 이미지를 multer에 저장

let upload = multer({storage : storage})

라우터 설정

app.get('/upload', function (req, res) {
    
    res.render('upload.ejs');
})

app.post('/upload', upload.single('profile'),function (req, res) {
    
    res.send('업로드완료');
})

upload.ejs

<!--form id, pw-->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>write입니다.</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
            crossorigin="anonymous">
    </head>
    <body>
        <%- include('nav.html') %>

        <h2 class= "container mt-4"><strong>이미지 파일 업로드 페이지</strong></h2>

        <div class="container mt-3">
          <form action="/upload" method="post" enctype="multipart/form-data">
                <input type="file" name="profile"/>
                <button type="submit">이미지전송</button>
          </form>
        </div>
        
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
            crossorigin="anonymous"></script>
    </body>
</html>

public / image 폴더 만들기

nodemon  MongoDBWebserver

이미지 가져오기

MongoDBWebserver.js

//이미지 가져오기
app.get('/image/:imgname', function (req, res) {
    
    res.sendFile(__dirname + '/public/image/' + req.params.imgname);
})

http://localhost:8080/image/파일이름