[Node.js] 시퀄라이즈 게시판 첨부파일 기능 구현하기

지난 포스팅

2024.10.16 - [Backend] - [Node.js] sequelize-CLI 기존 테이블 필드 추가, 외래키 association 적용

[Node.js] sequelize-CLI 기존 테이블 필드 추가, 외래키 association 적용

 

 

app.use(express.urlencoded({ extends: true })); // application/x-www-form-urlencoded

// name=value1&name2=value2

// Content-type: multipart/form-data -> image, file, name=value1&name2=value2

 

 

 

 

 

파일첨부의 경우 컨텐츠 타입이 multiapart/form-data이다. multipart/form-data는 웹에서 파일 업로드와 같이 복잡한 데이터를 전송할 때 사용되는 MIME 타입입니다. 이 형식은 텍스트 필드와 파일을 함께 전송할 수 있도록 설계되었다.

 

 

본문 형식(구조)은 아래와 같이 생겼는데, base64를 이용해서 인코딩을 하여 첨부파일을 쭉 보내게 된다.

로우레벨로 읽어서 전송해야하는 경우가 온다면 이러한 형식을 미리 알아두는 것이 좋다.

 

 

각설하고, 이렇게 첨부파일 기능을 구현할 때에 multer 라이브러리를 사용하면, 첨부파일을 사용하기 위한 미들웨어가 자동으로 설치된다.

 

1. 첨부파일을 위한 컬럼 추가 작업

을 위한 파일을 생성한다.

npx sequelize-cli migration:generate --name add-column-filename-to-posts

 

그러면 migrations 폴더 안에 위의 이름으로 설정한 파일이 새로 생성된 것이 확인된다.

해당 파일로 들어가서, up()에다가 await를 작성해준다.

(첫번째 인자, 즉 "Board" 자리에는 컬럼을 추가할 테이블명을 적어준다.)

await queryInterface.addColumn("Board", "filename", {
      type: Sequelize.STRING,
      allowNull: true,
    });

 

npx xequelize-cli db:migrate 

 

post.db를 확인해보면 filename 필드가 새로 생긴 것이 확인된다.

 

 

 

그리고 post.js에 들어가서 

npm i multer

 

app.js 가서

 

아래의 코드를 작성해준다.

multer 객체, 그리고 업로드와 다운로드를 위한 디렉토리를 지정하는 코드

 

 

app.use("/downloads", express.static(path.join(__dirname, "pulbic/uploads")));

 

라우팅을 /downloads 로 해주면, "public/uploads" 디렉토리에서 찾으라는 말이다.

 

그러고 이것대로 public/uploads 디렉토리를 만들어준다.

 

// directory for upload and download
app.use("/downloads", express.static(path.join(__dirname, "pulbic/uploads")));

const upload_dir = `public/uploads`;
const storage = multer.diskStorage({
  destination: `./${upload_dir}`, // ./public/uploads/
  filename: function (req, file, cb) {
    cb(null, path.parse(file.originalname).name + "-" + Date.now() + path.extname(file.originalname))
  }
})

 

 

여기서 cb = callback이고,

cb()의 첫번째 인자는 에러인데 처리하기 싫어서 null로 넣었따.

그러면 test.png -> test-202410201010.png 로 나오게 된다.

 

// 위에서 설정한 파일을 storage로 보내주는 역할

const upload = multer({ storage: storage });

 

그리고 이걸 추가해준다. 미들웨어 설정이다.

"file"은 나중에 포스트맨으로 보면 확인할 수 있다.

 

미들웨어 설정을 한 후에, 포스트맨으로 쿼리를 날려준다.