게시판-파일 업로드, 다운로드

파일 업로드, 다운로드를 하기 위해서 multer를 사용했다.

npm install multer

multer를 먼저 다운받아주고,

<form action="/board/write" method="post" enctype="multipart/form-data">
...

<div>
    <label for="file">파일:</label>
    <input type="file" id="file" name="file" />
</div>

write.ejs 파일에 파일 업로드 부분을 추가하고 form에서 enctype을 설정해주었다.

 

filePath: {
    type: DataTypes.STRING,
    allowNull: true,
  },
  fileName: {
    type: DataTypes.STRING,
    allowNull: true
  }

posts 테이블에 설정도 바꿔주고

let filePath = null;
    let fileName = null;

    if (req.file) {
      filePath = req.file.path;
      fileName = req.file.originalname;
    }

    const hashedPassword = secret && password ? await bcrypt.hash(password, 10) : null;

    db.posts.create({
        title: title,
        content: content,
        writer: req.session.user.username,
        secret: secret === 'on',
        password: hashedPassword,
        category: category,
        filePath: filePath,
        fileName: fileName

write 요청을 처리하는 부분에 파일 정보를 추가하였다.

 

 

<파일 다운로드>

<div>
    <% if (post.filePath && post.fileName) { %>
      <h3>첨부 파일</h3>
      <a href="/board/files/<%= post.fileName %>" download="<%= post.fileName %>">
        <%= post.fileName %>
      </a>
    <% } %>
</div>

파일 다운로드를 위해서 read.ejs 파일에 다운로드 링크를 추가하였다.

const path = require('path');
const multer = require('multer');

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {
      cb(null, file.originalname);
    }
});
  
const upload = multer({ storage: storage });

router.get('/files/:filename', (req, res) => {
    console.log(1);
    const filename = req.params.filename;
    const filePath = path.join(__dirname, '../', 'uploads', filename);
    console.log(filePath);
    res.download(filePath);
});

다운로드 요청을 처리하기 위해 라우터 파일에 링크를 추가하였다.

파일들은 uploads 폴더에 올라가게 설정해 두었다.