서버에 이미지를 업로드 할 일이 생겨서 사용해본 Node.js 미들웨어 multer.js
multer는 1개의 이미지 업로드도 가능하고, 2개 이상 업로드도 가능하다
주로 multer는 aws s3와 연계해서 사용을 하는것 같은데
나는 그냥 사용중이었던 ec2에 업로드했다
목적 : 서버에 이미지 업로드
npm을 이용한 설치법
npm install multer
하나의 이미지 업로드 하는법
일단 이미지 업로드를 위한 자바스크립트 파일을 새롭게 만들고
서버에서 사용해줄 것임
imgUpload.js
//이미지 업로드 파일
//imgUpload.js
const multer = require('multer')
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploadImg')
//이미지 업로드시킬 폴더 위치
},
filename: function (req, file, cb) {
cb(null, file.originalname)
//서버에 저장할 파일 명
}
})
var upload = multer({ storage: storage })
//storage는 업로드 될 폴더 위치
module.exports = {
upload
};
서버에서 post 요청 저리하는 부분
main.js
//server.js
var express = require('express')
//이미지 업로드
var img = require('./imgUpload.js')
//파일 1개를 업로드 하는 경우
app.post('/upload', img.upload.single('file'), function (req, res, next) {
console.log('이미지 업로드 ㅇㅋ');
})
클라이언트에서 post 요청으로 이미지 서버로 넘기기
index.js
//서버에 이미지 업로드 post 요청
//index.js
function imgUpload(){
console.log('이미지 업로드 한 경우');
let formdata = new FormData();
var file = document.getElementById('imgUpload').files[0];
formdata.append('file', file);
fetch("/upload",{
method : "POST",
body: formdata
})
}formdata를 이용해서 선택한 이미지 파일을 서버로 전달했다
index.html
<!--html 이미지 업로드 1개-->
<!-- index.html -->
<div class="col-md-12 col-sm-12">
<input type="file" id="imgUpload" style = "display:none;" accept="image/png, image/jpeg"></input>
<label id="imgLabel" for="imgUpload">장소 이미지 추가하기</label>
</div>
input 태그에 accept="image/png, image/jpeg" 부분을 추가해주어
png, jpeg 파일 형식만 업로드 시킬수있도록 추가해보았다
위의 방식은 하나의 이미지만 업로드해도 충분해서 커스터마이징을 해본 방법이고
아래의 2개 이상의 이미지 업로드 부분은
정리된 부분을 그대로 참고해본 방법으로
혹시 사용 중 문제가 생긴다면 댓글로 알려주세요
이미지 파일 2개 이상 업로드 하는 법
index.html
<!DOCTYPE html>
<head>
<title>Profile form</title>
</head>
<body>
<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>
index.js
var express = require('express')
var multer = require('multer')
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('/uploads', express.static('uploads'));
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)
})
참고 :
How to Upload Image Using Multer in Node.js?
Whenever you make a website like social media app or blog app , you will most probably have feature where you will allow user to upload…
medium.com
'웹 > javascript : 활용' 카테고리의 다른 글
| [javascript] 카카오맵 지도 API 사용하는법 (2. 웹에 지도 띄우기) (0) | 2022.01.30 |
|---|---|
| [javascript] 카카오맵 지도 API 사용하는법 (1.키 발급) (0) | 2021.11.05 |
| [javascript] string 문자열 자르기 및 주소 url 인코딩 하는법 (0) | 2021.11.03 |
| [javascript] 카카오 맵 API 이용 시, parser-blocking 경고 (0) | 2021.09.19 |
| [javascript] Uncaught DOMException: Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document. (0) | 2021.09.06 |
| [javascript] Node.JS mongoDB 연동하기 부터 삭제까지 (0) | 2021.08.26 |