[node js] 파일전송


네비게이션



file.js

var express = require('express')
var app = express()
var router = express.Router()
var mysql = require('mysql')
var fs = require('fs')
var ejs = require('ejs')

//파일관련 모듈
var multer = require('multer')

//파일 저장위치와 파일이름 설정
var storage = multer.diskStorage({
destination: function (req, file, cb) {
//파일이 이미지 파일이면
if (file.mimetype == "image/jpeg" || file.mimetype == "image/jpg" || file.mimetype == "image/png") {
console.log("이미지 파일이네요")
cb(null, 'uploads/images')
//텍스트 파일이면
} else if (file.mimetype == "application/pdf" || file.mimetype == "application/txt" || file.mimetype == "application/octet-stream") {
console.log("텍스트 파일이네요")
cb(null, 'uploads/texts')
}
},
//파일이름 설정
filename: function (req, file, cb) {
cb(null, Date.now() + "-" + file.originalname)
}

})
//파일 업로드 모듈
var upload = multer({ storage: storage })


//파일 업로드 및 디비에 위치 저장
router.post('/upload_images', upload.single('fileupload'), function (req, res) {
console.log("post")
console.log(req.file)
console.log(req.file.path)
console.log(upload)
console.log(upload.storage.getFilename)

//파일 위치를 mysql 서버에 저장
getConnection().query('insert into myfile(name) values (?)', [req.file.path], function () {

res.redirect('/filepage');
});
});



//파일 페이지 보여주기
router.get("/filepage", function (req, res) {
console.log("파일 페이지 나와라")

//파일 가져올 위치
var path = __dirname + '/../' + 'uploads/images/'

fs.readFile('file.html', 'utf-8', function (error, data) {
var queryString = 'select * from myfile'
getConnection().query(queryString, function (error, result) {
if (error) {
console.log("파일가져올때 에러 발생" + error);
return
}
res.send(ejs.render(data, {
data: result
}));
});
})


})

//파일 다운로드 눌렀을 때 작동
router.get('/download/uploads/images/:name', function (req, res) {
var filename = req.params.name;

var file = __dirname + '/../uploads/images/' + filename
console.log(__dirname)
console.log(req.path)
console.log(file)
res.download(file); // Set disposition and send it.
});


var pool = mysql.createPool({
connectionLimit: 10,
host: 'localhost',
user: 'root',
database: 'wow',
password: '1111'
})


//디비 연결 함수
function getConnection() {
return pool
}


module.exports = router


file.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>파일</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="jumbotron">
<h1>파일업로드</h1>
<p> </p>
</div>
<p>.</p>
<a href="/main">게시판으로 이동</a>
</div>


<br>
<br>
<div class="container">
<form action="/upload_images" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleFormControlFile1">파일업로드</label>
<input type="file" class="form-control-file" id="fileupload" name="fileupload">
</div>
<input type="submit" value="올리기">
</form>
</div>

<br>
<br>
<br>
<h2>파일 다운로드</h2>
<ul>
<% data.forEach(function (item,index){ %>

<li><a href='/download/<%= item.name%>'><%= item.name%></a></li>

<% })%>
</ul>
</body>
</html>


결과화면


  1. 2018.10.24 12:58

    비밀댓글입니다

  2. it취준생 2018.11.11 23:11 신고

    한가지 궁금증이 있습니다.
    ejs(html)에서 파일뿐아니라 게시글제목, 작성자, 게시글내용까지 같이 작성한뒤에 mysql에 저장하려고 합니다.
    제목,작성자,게시글,파일까지 하나의 form내부에 작성한뒤 submit하도록 하였고 form타입은 enctype="multipart/form-data" 로 지정하였습니다.
    일부 html코드를 덧붙입니다.
    <td>작성자</td>
    <td><input type="text" name="brdwriter" size="20" maxlength="20" value="<%=row.BRDWRITER%>"></td>
    <input type="file" name="imgFile" value="<%=row.BRDIMAGE%>">

    이렇게 넘겨준 상태에서
    router의 파트에서
    router.post('/save', uqload.single("imgFile"), function(req,res,next){
    var data = [req.body.brdtitle, req.body.brdmemo, req.body.brdwriter, req.body.brdno, req.file.imgFile];
    ~~~ sql = "INSERT INTO TBL_BOARD(BRDTITLE, BRDMEMO, BRDWRITER, BRDIMAGE, BRDDATE) VALUES(?,?,?,?, NOW())";
    connection.query(sql, data, function (err, rows)
    이렇게 사용하면 될거라고 생각하고 코드를 작성하였으나, 애초에 data자체가 비어버리더군요..
    어떻게 가능하게 만들수 있는지 알수 있을까요???

    p.s 따로 이미지첨부관련 기능을 싹 빼버리면 잘 작동하며, 본문대로 이미지만 처리하는식으로 코드를 작성해도 잘 작동합니다.
    이미지와 게시판을 동시에 db에 저장하는 과정에서 문제가 발생합니다.

+ Recent posts

티스토리 툴바