Sohn SooKyoung

💛💚

최대 1 분 소요

설정

사진 업로드와 관련된 Node.js의 미들웨어인 multer를 사용해주기 위해서 기본 설정이 필요하다.

  1. cmd창에서 원하는 폴더 디렉토리로 이동한다. 그리고 아래와 같이 입력한다.
  2. npm init -y
  3. npm install express
  4. npm install multer
  5. public 폴더 생성 -> 여기에 index.html 을 통해서 사진 업로드에 대한 html 생성 후 다음과 같은 코드를 작성합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!--public/index.html-->
<!DOCTYPE html>
<head>
    <title>Profile form</title>
</head>
<body>
    <form method="POST" action="/profile-upload-single" enctype="multipart/form-data">
        <div>
            <label>Upload profile picture</label>
            <input type="file" name="profile-file" required/>
        </div>
        <div>
            <input type="submit" value="Upload" />
        </div>
    </form>
 
    <hr>
 
    <form method="POST" action="/profile-upload-multiple" enctype="multipart/form-data">
        <div>
            <label>Upload multiple profile picture</label>
            <input type="file" name="profile-files" required multiple  />
        </div>
        <div>
            <input type="submit" value="Upload" />
        </div>
    </form>
</body>
</html>
cs
  1. 루트 프로젝트 디렉토리에 index.js 를 생성한 후 다음과 같은 코드를 작성합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
//index.js
var express = require('express')
var multer  = require('multer')
var port = 3000;
 
var app = express()
 
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, './uploads')
    },
    filename: function (req, file, cb) {
      cb(null, file.originalname)
    }
})
var upload = multer({ storage: storage })
 
/*
app.use('/a',express.static('/b'));
Above line would serve all files/folders inside of the 'b' directory
And make them accessible through http://localhost:3000/a.
*/
app.use(express.static(__dirname + '/public'));
app.use('/uploads', express.static('uploads'));
 
app.post('/profile-upload-single', upload.single('profile-file'), function (req, res, next) {
  // req.file is the `profile-file` file
  // req.body will hold the text fields, if there were any
  console.log(JSON.stringify(req.file))
  var response = '<a href="/">Home</a><br>'
  response += "Files uploaded successfully.<br>"
  response += `<img src="${req.file.path}" /><br>`
  return res.send(response)
})
 
app.post('/profile-upload-multiple', upload.array('profile-files', 12), function (req, res, next) {
    // req.files is array of `profile-files` files
    // req.body will contain the text fields, if there were any
    var response = '<a href="/">Home</a><br>'
    response += "Files uploaded successfully.<br>"
    for(var i=0;i<req.files.length;i++){
        response += `<img src="${req.files[i].path}" /><br>`
    }
 
    return res.send(response)
})
 
 
app.listen(port,() => console.log(`Server running on port ${port}!`))
 
cs

관련 자료는 https://ichi.pro/ko/node-jseseo-multerleul-sayonghayeo-imijileul-eoblodeuhaneun-bangbeob-eun-mueos-ibnikka-267932940174935 에서 가져왔다. 근데 이거는 번역본인것 같았고, 영어로 된 것도 본 것 같기도,,,

  1. uploads 폴더를 루트 프로젝트 디렉토리에 생성해 주면 성공 -> 근데 분명 코드를 보면 uploads 폴더가 없으면 생성해서 업로드 해준다고 하는 것 같은데 이거는 실행이 안됨.

사진 업로드에 대해서 더 알아보아야 할 점

  1. 반드시 public 폴더 내에서 해야되는가?
  2. 이것을 어떻게 원하고자 하는대로 꾸며서 적용시킬 수 있을까?
  3. 자세한 코드는 좀더 분석해봐야 될 것 같다.
  4. 사진 이외의 영상 업로드 방법, 폴더 추가 방법 등을 더 공부해보자

댓글남기기

참고